import 'package:app_petty_cash/app/constant.dart';
import 'package:app_petty_cash/model/list_category_model.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';

class TransaksiSelectKategoriWidget extends StatelessWidget {
  const TransaksiSelectKategoriWidget({
    super.key,
    required this.listCategoryData,
    required this.selectedListCategory,
  });

  final ValueNotifier<List<ListCategory>> listCategoryData;
  final ValueNotifier<ListCategory> selectedListCategory;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: Constant.getActualXPhone(context: context, x: 390),
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<ListCategory>(
          isExpanded: true,
          hint: Row(
            children: [
              Expanded(
                child: Text(
                  'Select Item',
                  style: Constant.body1(context: context).copyWith(
                      fontWeight: FontWeight.w400, color: Constant.textBlack),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          items: listCategoryData.value.map((ListCategory option) {
            return DropdownMenuItem<ListCategory>(
              value: option,
              child: Text(
                option.categoryname ?? "",
                style: Constant.body1(context: context).copyWith(
                    color: Constant.textBlack, fontWeight: FontWeight.w400),
              ),
            );
          }).toList(),
          style: Constant.body1(context: context)
              .copyWith(color: Constant.textBlack, fontWeight: FontWeight.w400),
          value: selectedListCategory.value,
          onChanged: (ListCategory? newValue) {
            // if (newValue) {
            selectedListCategory.value = newValue!;
            print(selectedListCategory.value.categoryid);
            // }
          },
          buttonStyleData: ButtonStyleData(
            height: Constant.getActualY(context: context, y: 80),
            width: Constant.getActualX(context: context, x: 320),
            padding: EdgeInsets.only(
              left: Constant.getActualX(context: context, x: 20),
              right: Constant.getActualX(context: context, x: 20),
            ),
            decoration: BoxDecoration(
              color: Constant.white,
              border: Border.all(color: Constant.textGrey, width: 1),
              borderRadius: BorderRadius.circular(8),
            ),
            // elevation: 2,
          ),
          iconStyleData: IconStyleData(
            icon: Icon(
              Icons.keyboard_arrow_down_outlined,
            ),
            iconSize: 24,
            iconEnabledColor: Constant.textBlack,
            iconDisabledColor: Colors.grey,
          ),
          dropdownStyleData: DropdownStyleData(
            maxHeight: Constant.getActualY(context: context, y: 200),
            // width: Constant.getActualX(context: context, x: 320),
            padding: EdgeInsets.only(
              top: Constant.getActualY(context: context, y: 10),
              left: Constant.getActualX(context: context, x: 20),
              right: Constant.getActualX(context: context, x: 20),
              bottom: Constant.getActualY(context: context, y: 10),
            ),
            decoration: BoxDecoration(
              color: Constant.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 20.0,
                  spreadRadius: 2.0,
                  offset: Offset(0.0, 0.0),
                ),
              ],
            ),
            elevation: 8,
            offset: const Offset(0, -10),
            scrollbarTheme: ScrollbarThemeData(
              radius: const Radius.circular(40),
              thickness: MaterialStateProperty.all<double>(6),
              thumbVisibility: MaterialStateProperty.all<bool>(true),
            ),
          ),
          menuItemStyleData: MenuItemStyleData(
            height: Constant.getActualY(context: context, y: 56),
            padding: EdgeInsets.only(
              top: Constant.getActualY(context: context, y: 10),
              left: Constant.getActualX(context: context, x: 20),
              right: Constant.getActualX(context: context, x: 20),
            ),
          ),
        ),
      ),
    );
  }
}
