import { Grid } from "../components/Grid/Grid";
import Typography from "../components/Typography/Typography";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDownIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
import { useUserProfileStore } from "../context/zustand-store/userStore";
import { getUserPermissions } from "../utils/getUserAvalableItems";
import { ItemWithSubItems } from "../types/userPermissions";
import { useNavigate } from "@tanstack/react-router";
import { Bars3Icon, QueueListIcon } from "@heroicons/react/24/outline";
import { getFaPermissions } from "../utils/getFaPermissions";
import SVGImage from "../components/SvgImage/SvgImage";

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, scale: 0.95, y: 20 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 20,
    },
  },
};

const submenuVariants = {
  hidden: { height: 0, opacity: 0 },
  visible: {
    height: "auto",
    opacity: 1,
    transition: {
      type: "tween",
      ease: "easeOut",
      duration: 0.1,
    },
  },
  exit: {
    height: 0,
    opacity: 0,
    transition: {
      duration: 0.1,
    },
  },
};

export const Menu = () => {
  const { profile } = useUserProfileStore();

  const menuItems: ItemWithSubItems[] = getUserPermissions(
    profile?.permissions
  );

  const getOpenedItem = () => {
    if (window.location.pathname !== "/") {
      const matchedIndex = menuItems.findIndex((item) =>
        item.subItems.some((sub) => sub.path === window.location.pathname)
      );
      return matchedIndex;
    } else {
      return null;
    }
  };

  const [openIndex, setOpenIndex] = useState<number | null>(getOpenedItem());
  const navigate = useNavigate();

  const toggleSubmenu = (index: number) => {
    setOpenIndex((prev) => (prev === index ? null : index));
  };

  return (
    <Grid
      container
      column
      className="block md:hidden px-4 pt-6 pb-12 bg-gradient-to-b select-none items-start from-white to-dark-100 dark:from-dark-900 dark:to-dark-800 min-h-screen"
    >
      <Typography
        variant="h6"
        className="text-center gap-2 flex justify-center items-center text-dark-800 dark:text-dark-100 font-semibold text-xl mb-6"
      >
        <Bars3Icon className="w-4" />
        داشبورد
      </Typography>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="flex flex-col items-center gap-4 w-full"
      >
        {menuItems.map(({ fa, icon: Icon, subItems }, index) => (
          <motion.div
            key={index}
            variants={itemVariants}
            className="w-full max-w-sm"
          >
            <motion.button
              onClick={() => toggleSubmenu(index)}
              whileTap={{ scale: 0.97 }}
              className="w-full  flex justify-between items-center gap-3 px-4 py-3 rounded-lg shadow-xs dark:shadow-sm shadow-dark-300 dark:shadow-dark-500  backdrop-blur-md bg-gradient-to-r from-transparent to-transparent dark:via-gray-800 via-gray-100 border border-dark-200 dark:border-dark-700 text-dark-800 dark:text-dark-100 transition-all duration-200"
            >
              <div className="flex items-center gap-3">
                <SVGImage
                  src={Icon}
                  className={` text-primary-800 dark:text-primary-100`}
                />

                <span className="text-base font-medium">{fa}</span>
              </div>
              <ChevronDownIcon
                className={`w-5 h-5 text-dark-500 dark:text-dark-300 transition-transform duration-300 ${
                  openIndex === index ? "rotate-180" : ""
                }`}
              />
            </motion.button>

            <AnimatePresence>
              {openIndex === index && (
                <motion.div
                  key="submenu"
                  variants={submenuVariants}
                  initial="hidden"
                  animate="visible"
                  exit="exit"
                  className="mt-2 mr-4 border-r-2 border-primary-500 dark:border-primary-400 pr-4 flex flex-col gap-2"
                >
                  {subItems
                    .filter((item) => !item?.path.includes("$"))
                    ?.map((sub, subIndex) => (
                      <motion.button
                        onClick={() => {
                          navigate({ to: sub.path });
                        }}
                        key={subIndex}
                        whileTap={{ scale: 0.97 }}
                        className="text-sm flex items-center gap-2 text-dark-700 dark:text-dark-200 bg-white dark:bg-dark-700 shadow-sm px-3 py-2 rounded-lg w-full text-right"
                      >
                        {" "}
                        <QueueListIcon className="w-3" />
                        {getFaPermissions(sub.name)}
                      </motion.button>
                    ))}
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        ))}
      </motion.div>
    </Grid>
  );
};
