import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/style.dart';

Future<void> showPopUpFilterMenu({
  required BuildContext context,
  required Function(String value) onSortAtoZ,
  required Function(String value) onSortZtoA,
  Function()? cancelButton,
  required Map<String, bool> checkboxStates,
  required RelativeRect position,
  Function()? onOkPressed,
  List<String>? list,
  String? isSelected,
}) async {
  await showMenu(
    context: context,
    position: position,
    color: ColorsManager.whiteColors,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
    items: <PopupMenuEntry>[
      PopupMenuItem(
        enabled: false,
        child: StatefulBuilder(
          builder: (context, setState) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  child: ListTile(
                    onTap: () {
                      setState(() {
                        if (isSelected == 'Asc') {
                          isSelected = null;
                          onSortAtoZ.call('');
                        } else {
                          onSortAtoZ.call('Asc');
                          isSelected = 'Asc';
                        }
                      });
                    },
                    leading: Image.asset(
                      Assets.AtoZIcon,
                      width: 25,
                    ),
                    title: Text(
                      "Sort A to Z",
                      style: TextStyle(
                          color: isSelected == "Asc"
                              ? ColorsManager.blackColor
                              : ColorsManager.grayColor),
                    ),
                  ),
                ),
                ListTile(
                  onTap: () {
                    setState(() {
                      if (isSelected == 'Desc') {
                        isSelected = null;
                        onSortZtoA.call('');
                      } else {
                        onSortZtoA.call('Desc');
                        isSelected = 'Desc';
                      }
                    });
                  },
                  leading: Image.asset(
                    Assets.ZtoAIcon,
                    width: 25,
                  ),
                  title: Text(
                    "Sort Z to A",
                    style: TextStyle(
                        color: isSelected == "Desc"
                            ? ColorsManager.blackColor
                            : ColorsManager.grayColor),
                  ),
                ),
                const Divider(),
                const Text(
                  "Filter by ",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Container(
                  decoration: containerDecoration.copyWith(
                      boxShadow: [],
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(10),
                          bottomLeft: Radius.circular(10),
                          bottomRight: Radius.circular(10))),
                  padding: const EdgeInsets.all(10),
                  height: 200,
                  width: 400,
                  child: Container(
                    padding: const EdgeInsets.all(10),
                    color: Colors.white,
                    child: ListView.builder(
                      itemCount: list?.length ?? 0,
                      itemBuilder: (context, index) {
                        final item = list![index];
                        return Row(
                          children: [
                            Checkbox(
                              value: checkboxStates[item],
                              onChanged: (bool? newValue) {
                                checkboxStates[item] = newValue ?? false;
                                (context as Element).markNeedsBuild();
                              },
                            ),
                            Text(
                              item,
                              style: TextStyle(color: ColorsManager.grayColor),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const Divider(),
                const SizedBox(
                  height: 10,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {
                        Navigator.of(context).pop(); // Close the menu
                      },
                      child: const Text("Cancel"),
                    ),
                    GestureDetector(
                      onTap: onOkPressed,
                      child: const Text(
                        "OK",
                        style: TextStyle(
                          color: ColorsManager.spaceColor,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            );
          },
        ),
      ),
    ],
  );
}
