/// Role Dropdown Widget
///
/// Dropdown for selecting user role during registration.
library;

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';

/// Role Dropdown
///
/// A custom dropdown widget for selecting user role.
/// Roles:
/// - dealer: Đại lý hệ thống
/// - worker: Kiến trúc sư/ Thầu thợ
/// - broker: Khách lẻ
/// - other: Khác
///
/// Usage:
/// ```dart
/// RoleDropdown(
///   value: selectedRole,
///   onChanged: (value) {
///     setState(() {
///       selectedRole = value;
///     });
///   },
///   validator: (value) {
///     if (value == null || value.isEmpty) {
///       return 'Vui lòng chọn vai trò';
///     }
///     return null;
///   },
/// )
/// ```
class RoleDropdown extends StatelessWidget {
  /// Creates a role dropdown
  const RoleDropdown({
    super.key,
    required this.value,
    required this.onChanged,
    this.validator,
  });

  /// Selected role value
  final String? value;

  /// Callback when role changes
  final void Function(String?) onChanged;

  /// Form field validator
  final String? Function(String?)? validator;

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      initialValue: value,
      decoration: InputDecoration(
        hintText: 'Chọn vai trò của bạn',
        hintStyle: const TextStyle(
          fontSize: InputFieldSpecs.hintFontSize,
          color: AppColors.grey500,
        ),
        prefixIcon: const Icon(
          FontAwesomeIcons.briefcase,
          color: AppColors.primaryBlue,
          size: AppIconSize.md,
        ),
        filled: true,
        fillColor: AppColors.white,
        contentPadding: InputFieldSpecs.contentPadding,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(InputFieldSpecs.borderRadius),
          borderSide: const BorderSide(color: AppColors.grey100, width: 1.0),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(InputFieldSpecs.borderRadius),
          borderSide: const BorderSide(color: AppColors.grey100, width: 1.0),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(InputFieldSpecs.borderRadius),
          borderSide: const BorderSide(
            color: AppColors.primaryBlue,
            width: 2.0,
          ),
        ),
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(InputFieldSpecs.borderRadius),
          borderSide: const BorderSide(color: AppColors.danger, width: 1.0),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(InputFieldSpecs.borderRadius),
          borderSide: const BorderSide(color: AppColors.danger, width: 2.0),
        ),
      ),
      items: const [
        DropdownMenuItem(value: 'dealer', child: Text('Đại lý hệ thống')),
        DropdownMenuItem(
          value: 'worker',
          child: Text('Kiến trúc sư/ Thầu thợ'),
        ),
        DropdownMenuItem(value: 'broker', child: Text('Khách lẻ')),
        DropdownMenuItem(value: 'other', child: Text('Khác')),
      ],
      onChanged: onChanged,
      validator: validator,
      icon: const FaIcon(FontAwesomeIcons.chevronDown, color: AppColors.grey500, size: 16),
      dropdownColor: AppColors.white,
      style: const TextStyle(
        fontSize: InputFieldSpecs.fontSize,
        color: AppColors.grey900,
      ),
    );
  }
}