import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:regroup/Utils/texts.dart';

class CustomDropDownWidgetSignup extends StatefulWidget {
  const CustomDropDownWidgetSignup({
    Key? key,
    required this.header,
    required this.title,
    required this.listData,
    required this.onItemSelected,
    this.leadingImage,
  }) : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final Function(String) onItemSelected;
  final Widget? leadingImage;

  @override
  State<CustomDropDownWidgetSignup> createState() =>
      _CustomDropDownWidgetSignupState();
}

class _CustomDropDownWidgetSignupState
    extends State<CustomDropDownWidgetSignup> {
  RxBool onDropTap = false.obs;
  RxString selectedValue = "".obs;

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              onDropTap.value = !onDropTap.value;
            },
            child: Container(
              width: double.infinity,
              height: 50.h,
              padding: EdgeInsets.only(
                  top: 14.0, bottom: 14.0, right: 22.w, left: 12.w),
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: onDropTap.value
                    ? BorderRadius.vertical(
                        top: Radius.circular(30.r),
                      )
                    : BorderRadius.circular(30.r),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
                border: Border.all(color: const Color(0xFF434A53)),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      // Image.asset(
                      //   'assets/images/png/user.png',
                      // ),

                      widget.leadingImage == null
                          ? const SizedBox()
                          : widget.leadingImage!,

                      SizedBox(width: 16.w),
                      Text(
                        selectedValue.value.isEmpty
                            ? widget.header
                            : selectedValue.value,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.sp,
                            fontFamily: 'Helvetica',
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                  onDropTap.value
                      ? Image.asset('assets/images/png/arrowup.png')
                      : Image.asset('assets/images/png/arrowdown.png'),
                ],
              ),
            ),
          ),
          if (onDropTap.value)
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30.r),
                ),
                border: Border.all(color: const Color(0xFF434A53)),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
              ),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.listData.length,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      selectedValue.value = widget.listData[index];
                      onDropTap.value = !onDropTap.value;
                      widget.onItemSelected(selectedValue.value);
                    },
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
                          child: Text(
                            widget.listData[index],
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.sp,
                                fontWeight: FontWeight.w400,
                                fontFamily: 'Helvetica'),
                          ),
                        ),
                        // sizedBoxHeight(5.h),
                        if (index != widget.listData.length - 1)
                          const Divider(thickness: 1, color: Color(0xFF434A53)),
                      ],
                    ),
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}

class CustomDropDownTag1 extends StatefulWidget {
  const CustomDropDownTag1(
      {Key? key,
      required this.header,
      required this.title,
      required this.listData,
      required this.onItemSelected,
      required this.leadingImage,
      required this.rowData})
      : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final List<String> rowData;
  final Function(String) onItemSelected;
  final Widget? leadingImage;

  @override
  State<CustomDropDownTag1> createState() => _CustomDropDownTag1State();
}

class _CustomDropDownTag1State extends State<CustomDropDownTag1> {
  RxBool onDropTap = false.obs;
  RxString selectedValue = "".obs;
  RxList<String> filteredListData = <String>[].obs;
  TextEditingController textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    filteredListData.value = widget.listData;
    textEditingController.addListener(() {
      filterList();
    });
  }

  void filterList() {
    String query = textEditingController.text.toLowerCase();
    if (query.isNotEmpty) {
      filteredListData.value = widget.listData
          .where((item) => item.toLowerCase().contains(query))
          .toList();
    } else {
      filteredListData.value = widget.listData;
    }
    onDropTap.value = filteredListData.isNotEmpty;
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 50.h,
            padding: EdgeInsets.only(
              right: 12.w,
              left: 12.w,
            ),
            decoration: BoxDecoration(
              color: const Color(0xFFFFFFFF).withOpacity(0.10),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  const Color(0xFFffffff).withOpacity(0.50),
                  const Color(0xFFFFFFFF).withOpacity(0.50),
                ],
              ),
              // color: Color(0xFFFFFFFF).withOpacity(0.10),
              borderRadius: onDropTap.value && filteredListData.isNotEmpty
                  ? BorderRadius.vertical(
                      top: Radius.circular(30.r),
                    )
                  : BorderRadius.circular(30.r),
              border: Border.all(color: const Color(0xFF434A53)),
            ),
            child: Center(
              child: TextFormField(
                controller: textEditingController,
                style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.white,
                    fontFamily: 'Helvetica'),
                cursorColor: Colors.red,
                enableInteractiveSelection: false,
                obscureText: false,
                decoration: InputDecoration(
                  hintText: widget.header,
                  hintStyle: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.white,
                      fontWeight: FontWeight.w400,
                      fontFamily: 'Helvetica'),
                  suffixIcon: GestureDetector(
                    onTap: () {
                      onDropTap.value = !onDropTap.value;
                    },
                    child: SizedBox(
                      height: 20.h,
                      width: 20,
                      child: Center(
                        child: Image.asset(
                          'assets/images/png/Frame 58575.png',
                          height: 20.h,
                          width: 20,
                        ),
                      ),
                    ),
                  ),
                  border: InputBorder.none,
                ),
                onTap: () {
                  onDropTap.value = !onDropTap.value;
                },
              ),
            ),
          ),
          if (onDropTap.value && filteredListData.isNotEmpty)
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30.r),
                ),
                border: Border.all(color: const Color(0xFF434A53)),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
              ),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: filteredListData.length,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      selectedValue.value = filteredListData[index];
                      onDropTap.value = false;
                      textEditingController.text = selectedValue.value;
                      widget.onItemSelected(selectedValue.value);
                      onDropTap.value = !onDropTap.value;
                    },
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
                          child: Row(
                            children: [
                              Text(
                                filteredListData[index],
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.w400,
                                    fontFamily: 'Helvetica'),
                              ),
                              const Spacer(),
                              text14400whiteblur(widget.rowData[widget.listData
                                  .indexOf(filteredListData[index])]),
                            ],
                          ),
                        ),
                        if (index != filteredListData.length - 1)
                          const Divider(thickness: 1, color: Color(0xFF434A53)),
                      ],
                    ),
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}

class CustomDropDownTag extends StatefulWidget {
  const CustomDropDownTag(
      {Key? key,
      required this.header,
      required this.title,
      required this.listData,
      required this.onItemSelected,
      required this.leadingImage,
      required this.rowData})
      : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final List<String> rowData;
  final Function(String) onItemSelected;
  final Widget? leadingImage;

  @override
  State<CustomDropDownTag> createState() => _CustomDropDownTagState();
}

class _CustomDropDownTagState extends State<CustomDropDownTag> {
  RxBool onDropTap = false.obs;
  RxString selectedValue = "".obs;

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              onDropTap.value = !onDropTap.value;
            },
            child: Container(
              width: double.infinity,
              height: 50.h,
              padding: EdgeInsets.only(
                  top: 14.0, bottom: 14.0, right: 22.w, left: 12.w),
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: onDropTap.value
                    ? BorderRadius.vertical(
                        top: Radius.circular(30.r),
                      )
                    : BorderRadius.circular(30.r),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
                border: Border.all(color: const Color(0xFF434A53)),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      // Image.asset(
                      //   'assets/images/png/user.png',
                      // ),

                      widget.leadingImage!,
                      SizedBox(width: 16.w),
                      Text(
                        selectedValue.value.isEmpty
                            ? widget.header
                            : selectedValue.value,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.sp,
                            fontFamily: 'Helvetica',
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                  onDropTap.value
                      ? Image.asset('assets/images/png/arrowup.png')
                      : Image.asset('assets/images/png/arrowdown.png'),
                ],
              ),
            ),
          ),
          if (onDropTap.value)
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30.r),
                ),
                border: Border.all(color: const Color(0xFF434A53)),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
              ),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.listData.length,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      selectedValue.value = widget.listData[index];
                      onDropTap.value = !onDropTap.value;
                      widget.onItemSelected(selectedValue.value);
                    },
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
                          child: Row(
                            children: [
                              Text(
                                widget.listData[index],
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.w400,
                                    fontFamily: 'Helvetica'),
                              ),
                              const Spacer(),
                              text14400whiteblur(widget.rowData[index]),
                            ],
                          ),
                        ),
                        // sizedBoxHeight(5.h),
                        if (index != widget.listData.length - 1)
                          const Divider(thickness: 1, color: Color(0xFF434A53)),
                      ],
                    ),
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}

///
class CustomDropDownRadio extends StatefulWidget {
  const CustomDropDownRadio({
    Key? key,
    required this.header,
    required this.title,
    required this.listData,
    required this.onItemSelected,
    required this.leadingImage,
    this.showOtherOption = false,
    this.initialSelectedValue = '',
  }) : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final Function(String) onItemSelected;
  final Widget? leadingImage;
  final bool showOtherOption;
  final String initialSelectedValue;

  @override
  State<CustomDropDownRadio> createState() => _CustomDropDownRadioState();
}

class _CustomDropDownRadioState extends State<CustomDropDownRadio> {
  RxBool onDropTap = false.obs;
  RxString selectedValue = ''.obs;
  final TextEditingController _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    selectedValue.value = widget.initialSelectedValue;
  }

  List<DropdownMenuItem<String>> _buildDropdownMenuItems() {
    List<DropdownMenuItem<String>> items =
        widget.listData.asMap().entries.map((entry) {
      int index = entry.key;
      String item = entry.value;
      return DropdownMenuItem<String>(
        value: item,
        child: InkWell(
          onTap: () {
            setState(() {
              selectedValue.value = item;
              _textController.clear();
              widget.onItemSelected(item);
              onDropTap.value = false; // Close the dropdown
            });
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                children: [
                  Obx(() {
                    return Radio<String>(
                      value: item,
                      activeColor: Colors.white,
                      groupValue: selectedValue.value,
                      onChanged: (value) {
                        setState(() {
                          selectedValue.value = value!;
                          _textController.clear();
                          widget.onItemSelected(value);
                          onDropTap.value = false; // Close the dropdown
                        });
                      },
                    );
                  }),
                  const SizedBox(width: 8),
                  Text(
                    item,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'Helvetica',
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
              if (index != widget.listData.length - 1)
                const Divider(thickness: 1, color: Color(0xFF434A53)),
            ],
          ),
        ),
      );
    }).toList();

    if (widget.showOtherOption) {
      items.add(
        DropdownMenuItem<String>(
          value: _textController.text,
          child: Column(
            children: [
              const Divider(thickness: 1, color: Color(0xFF434A53)),
              Row(
                children: [
                  Obx(() {
                    return Radio<String>(
                      value: _textController.text,
                      activeColor: Colors.white,
                      groupValue: selectedValue.value,
                      onChanged: (value) {
                        setState(() {
                          selectedValue.value = value!;
                          _textController.clear();
                          widget.onItemSelected(value);
                          onDropTap.value = false; // Close the dropdown
                        });
                      },
                    );
                  }),
                  const SizedBox(width: 8),
                  const Text(
                    "Other: ",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'Helvetica',
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                  Expanded(
                    child: TextField(
                      controller: _textController,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w500,
                      ),
                      decoration: const InputDecoration(
                        hintText: '',
                        hintStyle: TextStyle(color: Colors.white70),
                        border: UnderlineInputBorder(),
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: () {
                      if (_textController.text.trim().isNotEmpty) {
                        setState(() {
                          selectedValue.value = _textController.text;
                          widget.onItemSelected(_textController.text);
                          onDropTap.value = false; // Close the dropdown
                        });
                      }
                    },
                    child: const Text(
                      'OK',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10.h),
            ],
          ),
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                onDropTap.value = !onDropTap.value;
              });
            },
            child: Container(
              width: double.infinity,
              height: 52.h,
              padding: EdgeInsets.only(
                right: 22.w,
                left: 12.w,
              ),
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: onDropTap.value
                    ? BorderRadius.vertical(
                        top: Radius.circular(30.r),
                      )
                    : BorderRadius.circular(30.r),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
                border: Border.all(color: const Color(0xFF434A53)),
              ),
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    widget.leadingImage!,
                    SizedBox(width: 12.w),
                    Text(
                      selectedValue.value.isEmpty
                          ? widget.header
                          : selectedValue.value,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.sp,
                          fontFamily: 'Helvetica',
                          fontWeight: FontWeight.w400),
                    ),
                    const Spacer(),
                    onDropTap.value
                        ? Image.asset('assets/images/png/arrowup.png')
                        : Image.asset('assets/images/png/arrowdown.png'),
                  ],
                ),
              ),
            ),
          ),
          if (onDropTap.value)
            Scrollbar(
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: const Color(0xFFFFFFFF).withOpacity(0.10),
                  borderRadius: BorderRadius.vertical(
                    bottom: Radius.circular(30.r),
                  ),
                  border: Border.all(color: const Color(0xFF434A53)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      const Color(0xFFffffff).withOpacity(0.50),
                      const Color(0xFFFFFFFF).withOpacity(0.50),
                    ],
                  ),
                ),
                child: Column(
                  children: _buildDropdownMenuItems(),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

class CustomDropDownChexkBox extends StatefulWidget {
  const CustomDropDownChexkBox({
    Key? key,
    required this.header,
    required this.title,
    required this.listData,
    required this.onItemSelected,
    this.leadingImage,
    this.showOtherOption = false,
    required this.initiallySelected, // Added this line
  }) : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final Function(List<String>) onItemSelected;
  final Widget? leadingImage;
  final bool showOtherOption;
  final List<String> initiallySelected; // Added this line

  @override
  State<CustomDropDownChexkBox> createState() => _CustomDropDownChexkBoxState();
}

class _CustomDropDownChexkBoxState extends State<CustomDropDownChexkBox> {
  RxBool onDropTap = false.obs;
  RxList<String> selectedValues = <String>[].obs;
  final TextEditingController _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    selectedValues.addAll(widget.initiallySelected); // Added this line
  }

  List<DropdownMenuItem<String>> _buildDropdownMenuItems() {
    List<DropdownMenuItem<String>> items =
        widget.listData.asMap().entries.map((entry) {
      int index = entry.key;
      String item = entry.value;
      return DropdownMenuItem<String>(
        value: item,
        child: InkWell(
          onTap: () {
            if (selectedValues.contains(item)) {
              selectedValues.remove(item);
            } else {
              selectedValues.add(item);
            }
            _textController.clear();
            widget.onItemSelected(selectedValues);
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                children: [
                  Obx(() {
                    return Checkbox(
                      value: selectedValues.contains(item),
                      activeColor: Colors.white,
                      checkColor: const Color(0xFFD90B2E),
                      onChanged: (bool? value) {
                        if (value == true) {
                          selectedValues.add(item);
                        } else {
                          selectedValues.remove(item);
                        }
                        _textController.clear();
                        widget.onItemSelected(selectedValues);
                      },
                    );
                  }),
                  const SizedBox(width: 8),
                  Text(
                    item,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'Helvetica',
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
              if (index != widget.listData.length - 1)
                const Divider(thickness: 1, color: Color(0xFF434A53)),
            ],
          ),
        ),
      );
    }).toList();

    if (widget.showOtherOption) {
      items.add(
        DropdownMenuItem<String>(
          value: _textController.text,
          child: Column(
            children: [
              const Divider(thickness: 1, color: Color(0xFF434A53)),
              Row(
                children: [
                  Obx(() {
                    return Checkbox(
                      value: selectedValues.contains(_textController.text),
                      activeColor: Colors.white,
                      onChanged: (bool? value) {
                        if (value == true &&
                            _textController.text.trim().isNotEmpty) {
                          selectedValues.add(_textController.text);
                        } else {
                          selectedValues.remove(_textController.text);
                        }
                        widget.onItemSelected(selectedValues);
                      },
                    );
                  }),
                  const SizedBox(width: 8),
                  const Text(
                    "Other: ",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'Helvetica',
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                  Expanded(
                    child: TextField(
                      controller: _textController,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w500,
                      ),
                      decoration: const InputDecoration(
                        hintText: '',
                        hintStyle: TextStyle(color: Colors.white70),
                        border: UnderlineInputBorder(),
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: () {
                      if (_textController.text.trim().isNotEmpty) {
                        selectedValues.add(_textController.text);
                        widget.onItemSelected(selectedValues);
                      }
                    },
                    child: const Text(
                      'OK',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 10),
            ],
          ),
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              onDropTap.value = !onDropTap.value;
            },
            child: Container(
              width: double.infinity,
              // height: 50,
              padding: const EdgeInsets.only(
                  right: 22, left: 12, top: 15, bottom: 15),
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: onDropTap.value
                    ? const BorderRadius.vertical(
                        top: Radius.circular(30),
                      )
                    : const BorderRadius.all(Radius.circular(30)),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
                border: Border.all(color: const Color(0xFF434A53)),
              ),
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    widget.leadingImage == null
                        ? const SizedBox()
                        : widget.leadingImage!,
                    const SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        selectedValues.isEmpty
                            ? widget.header
                            : selectedValues.join(', '),
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontFamily: 'Helvetica',
                          fontWeight: FontWeight.w400,
                        ),
                        // overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    // const Spacer(),
                    onDropTap.value
                        ? Image.asset('assets/images/png/arrowup.png')
                        : Image.asset('assets/images/png/arrowdown.png'),
                  ],
                ),
              ),
            ),
          ),
          if (onDropTap.value)
            Scrollbar(
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: const Color(0xFFFFFFFF).withOpacity(0.10),
                  borderRadius: const BorderRadius.vertical(
                    bottom: Radius.circular(30),
                  ),
                  border: Border.all(color: const Color(0xFF434A53)),
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      const Color(0xFFffffff).withOpacity(0.50),
                      const Color(0xFFFFFFFF).withOpacity(0.50),
                    ],
                  ),
                ),
                child: Column(
                  children: _buildDropdownMenuItems(),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

class CustomDropDownCheckBox extends StatefulWidget {
  const CustomDropDownCheckBox({
    Key? key,
    required this.header,
    required this.title,
    required this.listData,
    required this.onItemSelected,
    required this.images,
    required this.leadingImage,
  }) : super(key: key);

  final String header;
  final String title;
  final List<String> listData;
  final Function(List<String>) onItemSelected;
  final List<String> images;
  final Widget? leadingImage;

  @override
  State<CustomDropDownCheckBox> createState() => _CustomDropDownCheckBoxState();
}

class _CustomDropDownCheckBoxState extends State<CustomDropDownCheckBox> {
  RxBool onDropTap = false.obs;
  RxList<String> selectedValues = <String>[].obs;

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: () {
              onDropTap.value = !onDropTap.value;
            },
            child: Container(
              width: double.infinity,
              padding: EdgeInsets.only(
                  top: 14.0, bottom: 14.0, right: 22.w, left: 12.w),
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius: onDropTap.value
                    ? BorderRadius.vertical(top: Radius.circular(30.r))
                    : BorderRadius.circular(30.r),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
                border: Border.all(color: const Color(0xFF434A53)),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        if (widget.leadingImage != null) widget.leadingImage!,
                        SizedBox(width: 16.w),
                        Expanded(
                          child: Text(
                            selectedValues.isEmpty
                                ? widget.header
                                : selectedValues.join(', '),
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.sp,
                              fontFamily: 'Helvetica',
                              fontWeight: FontWeight.w400,
                            ),
                            // overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ),
                  onDropTap.value
                      ? Image.asset('assets/images/png/arrowup.png')
                      : Image.asset('assets/images/png/arrowdown.png'),
                ],
              ),
            ),
          ),
          if (onDropTap.value)
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFFFFFFFF).withOpacity(0.10),
                borderRadius:
                    BorderRadius.vertical(bottom: Radius.circular(30.r)),
                border: Border.all(color: const Color(0xFF434A53)),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    const Color(0xFFffffff).withOpacity(0.50),
                    const Color(0xFFFFFFFF).withOpacity(0.50),
                  ],
                ),
              ),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: widget.listData.length,
                itemBuilder: (context, index) {
                  String item = widget.listData[index];
                  String image = widget.images[index];
                  return InkWell(
                    onTap: () {
                      if (selectedValues.contains(item)) {
                        selectedValues.remove(item);
                      } else {
                        selectedValues.add(item);
                      }
                      widget.onItemSelected(selectedValues);
                    },
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 10.0, horizontal: 20.0),
                          child: Row(
                            children: [
                              Container(
                                width: 40.w,
                                height: 40.h,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8.r),
                                  image: DecorationImage(
                                    image: AssetImage(image),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              SizedBox(width: 8.w),
                              Expanded(
                                child: Text(
                                  item,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16.sp,
                                    fontFamily: 'hiragino',
                                    fontWeight: FontWeight.w500,
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                              Checkbox(
                                side:
                                    const BorderSide(color: Color(0xFF434A53)),
                                value: selectedValues.contains(item),
                                activeColor: const Color(0xFF434A53),
                                checkColor: Colors.white,
                                onChanged: (bool? value) {
                                  if (value == true) {
                                    selectedValues.add(item);
                                  } else {
                                    selectedValues.remove(item);
                                  }
                                  widget.onItemSelected(
                                      selectedValues);
                                },
                              ),
                            ],
                          ),
                        ),
                        if (index != widget.listData.length - 1)
                          const Divider(thickness: 1, color: Color(0xFF434A53)),
                      ],
                    ),
                  );
                },
              ),
            ),
        ],
      ),
    );
  }
}