import { useContext } from 'react'
import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'
import { SubMenuContext } from '@/contexts/contexts' 
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/shadcn/ui/accordion"


export const AccordionMenu = ({ title, to, isActive }) => {
  const { t } = useTranslation();
  return (
    <AccordionContent className='px-8 dark:text-white hover:text-data hover:bg-muted/10 rounded-sm'>
      <Link to={to} className={`${isActive ? 'active text-data font-bold' : ''}`}>
          {t(title)}
      </Link>
    </AccordionContent>
  )
}

export const SubMenu = () => {
  const { menuItems, activeLink } = useContext(SubMenuContext)
  const allItemValues = menuItems.map((_, index) => `item-${index}`); 

  return (
    <>
      {menuItems.map((item, index) => {
        const isActive = activeLink === item.to || (item.subMenus && item.subMenus.some(subItem => subItem.to === activeLink))
        const combinedClassName = `
        ${isActive ? `active !text-data` : ''}
        ${item.className || ''}
        `.trim();

        return (
          item.subMenus && item.subMenus.length > 0 ? ( 
            <Accordion 
            key={index} 
            type="multiple"
            value={allItemValues}
            className="flex flex-col ">
              <AccordionItem value={`item-${index}`}>
                <AccordionTrigger
                  className={`!justify-start gap-3 rounded-lg px-3 py-2 dark:text-white transition-all ${isActive ? 'active !text-data' : ''}`}
                >
                  <item.Icon />
                  {Array.isArray(item.title) ? (
                    <>
                      {item.title[0]} <sup className='-m-2'>{item.title[1]}</sup>
                    </>
                  ) : (
                    item.title
                  )} 
                </AccordionTrigger>

                <div className="pl-1 last:mb-3 [&>*:first-child]:mt-1">
                  {item.subMenus.map((el) => (
                    <AccordionMenu 
                    key={el.id} 
                    title={el.title} 
                    to={el.to}
                    isActive={activeLink === el.to}
                    className=''
                    />
                  ))}
                </div>
              </AccordionItem>
            </Accordion>
          ) : (
            <Link
              key={index}
              to={item.to}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 dark:text-white transition-all hover:text-data hover:bg-muted/10 ${combinedClassName}` }
            >
              <item.Icon />
            
              {Array.isArray(item.title) ? (
                  <>
                    {item.title[0]} <sup>{item.title[1]}</sup>
                  </>
                ) : (
                  item.title
                )
              }
            </Link>
          )
        )
      })}
    </>
  )
}

const HeaderMenu = () => {
  return (
    <>
      <div className="hidden md:block">
        <div className="flex h-full max-h-screen flex-col">
          <div className="flex h-[130px]">
            <Link to="/" className="absolute top-[24px] left-[35px]">
              <span className="after:content-[''] relative w-[170px] h-[102px] inline-block  after:absolute after:w-full after:h-full after:top-0 after:left-0 after:bg-[url('../images/313_logo.png')]"></span>
            </Link>
          </div>
          <div className="flex-1 h-[calc(100vh-130px)]">
            <nav className="grid items-start px-5 py-5 text-sm lg:px-7 lg:py-5">
              <SubMenu />
            </nav>
          </div>
        </div>
      </div>
    </>
 )
}

export default HeaderMenu