import 'package:flutter/material.dart';
import 'package:flutter_multi_selector_drop_down/flutter_multi_selector_drop_down.dart';
import 'package:flutter_multi_selector_drop_down/model/drop_down_decoration_model.dart';
import 'package:flutter_multi_selector_drop_down/widget/advance_drop_down.dart';
import 'package:get/get.dart'; // Assuming GetX is used

class MyAdvancedDropdownWidget extends StatefulWidget {
  final DropDownDecorationModel? tableDecorationModel;

  const MyAdvancedDropdownWidget({
    Key? key,
    this.tableDecorationModel,
  }) : super(key: key);

  @override
  State<MyAdvancedDropdownWidget> createState() =>
      _MyAdvancedDropdownWidgetState();
}

class _MyAdvancedDropdownWidgetState extends State<MyAdvancedDropdownWidget> {
  final GlobalKey<AdvancedDropDownSelectWidgetState> dropDownKey =
  GlobalKey<AdvancedDropDownSelectWidgetState>();

  final RxBool isDropDownOpen = false.obs; // For tracking dropdown state

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: SizedBox(
          width: getSize(232),
          height: getSize(32),
          child: AdvancedDropDownSelectWidget(
            key: dropDownKey,
            dropdownStatus: (bool value) {
              setState(() {
                isDropDownOpen.value = value;
              });
            },
            isMandatory: false,
            isMulti: true,
            showSearchIcon: false,
            initiallySelectedItem: null,
            initiallySelectedItemsList: [],
            // Can be populated dynamically
            isAddOnly: false,
            itemList: const [
              "Approved",
              "Rejected",
              "Pending Approval",
              "Verified",
              "Verification Failed"
            ],
            onClear: (bool isCleared) {
              if (isCleared) {
// Handle clear action
                print("Dropdown cleared.");
              }
            },
            onChanged: (List<String>? value) {
// Handle item selection
              print("Selected items: $value");
            },
            decoration: widget.tableDecorationModel ??
                DropDownDecorationModel(
                  fieldHeight: 32,
                  borderRadius: 8,
                  borderColor: Colors.grey,
                  focusedBorderColor: Colors.blue,
                  textStyle: const TextStyle(
                    color: Colors.black,
                    fontSize: 14,
                  ),
                  listItemTextStyle: const TextStyle(
                    color: Colors.black87,
                    fontSize: 12,
                  ),
                  hintText: "Select a status",
                  contentPadding:
                  const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  dropDownIconSize: 24,
                  iconColor: Colors.black54,
                  itemHoverColor: Colors.blue.shade100,
                  selectedOptionBackgroundColor: Colors.blue.shade50,
                  chipBackgroundColor: Colors.blueGrey.shade50,
                  chipLabelText: const TextStyle(
                    color: Colors.black,
                    fontSize: 12,
                  ),
                  menuBackgroundColor: Colors.white,
                ),
          ),
        ),
      ),
    );
  }
}

// Helper method to calculate size (adjust as needed)
double getSize(double input) {
// Example logic for scaling size (can be device-dependent)
  return input;
}