'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronRight } from 'lucide-react';
import { INavItem } from '@/widgets/navbar/lib/data';
import useSidebarStore from '@/shared/store/sidebarStore';
import Link from 'next/link';
import useFilterStore from '@/shared/store/filterStore';

interface ISidebarMenuItemProps {
  item: INavItem;
}

const SidebarMenuItem = ({ item }: ISidebarMenuItemProps) => {
  const { closeSidebar } = useSidebarStore();
  const [open, setOpen] = useState(false);

  const { setCategoryId, setCurrentPage } = useFilterStore();

  const handleSelectCategory = (id: number | null) => {
    setCategoryId(id);
    setCurrentPage(1);
  };

  const openSubMenu = () => {
    if (item.children && item.children.length) {
      setOpen((v) => !v);
    }
  };

  return (
    <div className="border-b border-b-white/10 select-none">
      <div className="flex py-[10px] justify-between items-center duration-200 cursor-pointer">
        <Link
          href={item.link}
          onClick={() => {
            if (item.link === '/products') {
              handleSelectCategory(null);
            }
            closeSidebar();
          }}
          className="font-semibold text-[14px] flex-1 hover:text-primary"
        >
          {item.title}
        </Link>
        {item.children?.length && (
          <div
            onClick={openSubMenu}
            className="bg-primary/50 hover:bg-primary duration-200 w-[25px] h-[25px] rounded-xs flex justify-center items-center"
          >
            <motion.div
              animate={{ rotate: open ? 90 : 0 }}
              transition={{ duration: 0.25 }}
            >
              <ChevronRight size={16} />
            </motion.div>
          </div>
        )}
      </div>
      {item.children?.length && (
        <AnimatePresence initial={false}>
          {open && (
            <motion.div
              key="submenu"
              initial="collapsed"
              animate="open"
              exit="collapsed"
              variants={{
                open: { opacity: 1, height: 'auto' },
                collapsed: { opacity: 0, height: 0 },
              }}
              transition={{ duration: 0.3, ease: [0.42, 0, 0.58, 1] as const }}
              className="border-l border-dashed border-l-primary ml-[10px] overflow-hidden"
            >
              {item.children.map((child) => (
                <Link
                  href={child.link}
                  key={child.id}
                  onClick={() => {
                    if (item.link === '/products') {
                      handleSelectCategory(child.id);
                    }
                    closeSidebar();
                  }}
                  className="block text-[13px] ml-[10px] font-semibold cursor-pointer py-[5px] hover:text-primary duration-300"
                >
                  {child.title}
                </Link>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </div>
  );
};

export default SidebarMenuItem;
