import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:web_panel/utils/App_color.dart';
import 'package:web_panel/utils/App_text_style.dart';

class AppDropDown extends StatefulWidget {
  AppDropDown({
    super.key,
    required this.selectedValue,
    required this.optionList,
    required this.width,
    this.controller,
    this.onSelected,
  });

  RxString selectedValue;

  List<String> optionList;
  double width;
  TextEditingController? controller;
  void Function(String val)? onSelected;

  @override
  State<AppDropDown> createState() => _AppDropDownState();
}

class _AppDropDownState extends State<AppDropDown> {
  @override
  Widget build(BuildContext context) {
    return Obx(
       () {
        return Container(
          width: widget.width,
          decoration: BoxDecoration(
            color: AppColor.secondaryColor,
            borderRadius: BorderRadius.circular(2.sp),
            border: Border.all(color: Colors.grey.shade700),
          ),
          child: PopupMenuButton<String>(
            color: AppColor.secondaryColor,

            // popup background
            offset: const Offset(0, 50),

            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(2.sp),
              side: BorderSide(color: Colors.grey.shade700),
            ),
            onSelected:
                widget.onSelected ??
                (String value) {
                  widget.selectedValue(value);
                  widget.controller?.text = value;
                },
            itemBuilder: (BuildContext context) {
              return widget.optionList.map((String choice) {
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice, style: AppTextStyle.cardText(context)),
                );
              }).toList();
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 2.sp, vertical: 1.sp),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(widget.selectedValue.value, style: AppTextStyle.cardText(context)),
                  // SizedBox(width: 10),
                  Spacer(),
                  Icon(Icons.arrow_drop_down, color: Colors.white, size: 6.sp),
                ],
              ),
            ),
          ),
        );
      }
    );
  }
}
