import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
import 'package:sk_base_mobile/widgets/common/multi-picker/multiselect_dropdown.dart';
import 'package:sk_base_mobile/widgets/form_item/sk_form_item.dart';
import 'package:sk_base_mobile/widgets/form_item/sk_base_field.dart';

class SkMultiPickerDropdown<T> extends SkBaseFieldWidget {
  final Function(FocusNode)? onTap;
  final bool isRequired;
  final String? hint;
  final bool isTextArea;
  final bool isDense;
  final Function(String)? onTapOutside;
  final Function(String)? onChanged;
  final String? Function(String?)? validator;
  final EdgeInsetsGeometry? contentPadding;
  final void Function(List<ValueItem<T>>)? onOptionSelected;
  final Icon? prefix;
  final Widget? suffixIcon;
  final InputBorder? border;
  final List<ValueItem<T>>? options;
  final List<ValueItem<T>>? selectedOptions;
  final MultiSelectController<T> multiSelectController =
      MultiSelectController<T>();
  SkMultiPickerDropdown(
      {super.key,
      super.customLabel = false,
      super.autoFocus = false,
      super.labelText,
      this.options,
      this.selectedOptions,
      this.onTap,
      this.onOptionSelected,
      this.hint,
      this.isRequired = false,
      this.onTapOutside,
      this.prefix,
      this.suffixIcon,
      this.onChanged,
      this.border,
      this.isTextArea = false,
      this.contentPadding,
      this.isDense = false,
      this.validator});

  @override
  Widget build(BuildContext context) {
    return SkFormItem(
      customLabel: customLabel,
      labelText: labelText,
      isRequired: isRequired,
      controller: baseFieldController,
      child: MultiSelectDropDown<T>(
        controller: multiSelectController,
        focusNode: focusNode,
        selectedOptions: selectedOptions ?? [],
        dropdownHeight: ScreenAdaper.height(300),
        onOptionSelected: onOptionSelected,
        options: options ?? <ValueItem<T>>[],
        borderColor: AppTheme.nearlyBlack,
        fieldBackgroundColor: fillColor,
        borderWidth: 1,
        borderRadius: ScreenAdaper.sp(15),
        focusedBorderWidth: 2,
        focusedBorderColor: AppTheme.primaryColorLight,
        hint: '请选择',
        hintStyle: Theme.of(Get.context!).inputDecorationTheme.hintStyle,
        hintPadding: EdgeInsets.symmetric(horizontal: ScreenAdaper.width(5)),
        selectionType: SelectionType.multi,
        chipConfig: ChipConfig(
          wrapType: WrapType.scroll,
          labelStyle: TextStyle(
              fontSize: ScreenAdaper.height(26), color: AppTheme.white),
          backgroundColor: AppTheme.primaryColor,
        ),
        optionTextStyle: TextStyle(fontSize: ScreenAdaper.height(26)),
        selectedOptionIcon: const Icon(Icons.check_circle),
      ),
    );

    // return DropdownButtonFormField<String>(
    //   focusNode: focusNode,
    //   onTap: () {
    //     if (widget.onTap != null) {
    //       widget.onTap!(focusNode);
    //     }
    //   },
    //   icon: Icon(Icons.arrow_drop_down),
    //   selectedItemBuilder: (context) => [
    //     Container(
    //       width: ScreenAdaper.width(200),
    //       child: SingleChildScrollView(
    //         scrollDirection: Axis.horizontal,
    //         child: Row(mainAxisSize: MainAxisSize.min, children: [
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //           SkTag(text: '角色', color: AppTheme.primaryColor),
    //         ]),
    //       ),
    //     )
    //   ],
    //   autovalidateMode: AutovalidateMode.onUserInteraction,
    //   decoration: InputDecoration(
    //     prefixIcon: widget.prefix,
    //     errorStyle: const TextStyle(fontSize: 0, height: 0.01),
    //     contentPadding: widget.contentPadding,
    //     isDense: widget.isDense,
    //     border: widget.border,
    //     floatingLabelBehavior: widget.floatingLabelBehavior,
    //     label: widget.labelText != null
    //         ? Row(
    //             crossAxisAlignment: CrossAxisAlignment.center,
    //             mainAxisSize: MainAxisSize.min,
    //             children: [
    //                 if (widget.isRequired)
    //                   Text(
    //                     "*",
    //                     style: TextStyle(
    //                         color: Colors.red,
    //                         fontSize: ScreenAdaper.height(30)),
    //                   ),
    //                 Text(
    //                   widget.labelText!,
    //                   style: TextStyle(fontSize: ScreenAdaper.height(30)),
    //                 ),
    //               ])
    //         : null,
    //     focusedBorder: OutlineInputBorder(
    //         borderSide:
    //             const BorderSide(color: AppTheme.primaryColorLight, width: 2),
    //         borderRadius: BorderRadius.circular(ScreenAdaper.sp(15))),
    //     hintText: widget.hint ?? '请输入',
    //   ),
    //   items: [],
    //   onChanged: (Object? value) {},
    // );
  }
}