import React from 'react';
import { CustomLink } from '@/src/components/custom-link';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/src/components/ui/accordion';
import { cn } from '@/src/utils/shadcn';
import { FiChevronDown } from 'react-icons/fi';

// Define types for menu items and sub-menu items
interface SubMenuItem {
  label: string;
  href: string;
  subMenuItems?: SubMenuItem[];
}

interface MenuItem {
  title: string;
  href?: string;
  subMenuItems?: SubMenuItem[];
}

const menuItemClasses = cn(
  'min-h-[3rem] inline-flex items-center w-full gap-4 rounded-none border-b-0 px-5 text-left font-primary text-base text-accent-700 font-bold no-underline hover:no-underline border-t focus:text-primary active:text-primary'
);

function renderSubMenuItems(subMenuItems: SubMenuItem[]) {
  return (
    <ul className="pl-5">
      {subMenuItems.map((subMenuItem, index) => (
        <li key={index} className="py-2">
          {subMenuItem.subMenuItems ? (
            <>
              {/* Submenu parent with clickable link */}
              <h4 className="text-lg font-bold text-primary">
                {subMenuItem.label}
              </h4>
              {renderSubMenuItems(subMenuItem.subMenuItems)}
            </>
          ) : (
            <CustomLink
              href={subMenuItem.href}
              className="text-black hover:text-primary"
            >
              {subMenuItem.label}
            </CustomLink>
          )}
        </li>
      ))}
    </ul>
  );
}

export function Navigation({ menuItems }: { menuItems: MenuItem[] }) {
  return (
    <Accordion type="single" collapsible className="grid w-full">
      {menuItems.map((menuItem, index) => (
        <React.Fragment key={index}>
          {'subMenuItems' in menuItem ? (
            <AccordionItem
              value={`${menuItem.title}-${index}`}
              className="border-none"
            >
              <AccordionTrigger
                className={cn(
                  menuItemClasses,
                  "[&[data-state='open']]:bg-accent-100 [&[data-state='open']]:text-primary",
                  menuItem.subMenuItems
                    ? "[&[data-state='open']&_.accordion-icon]:-rotate-180"
                    : ''
                )}
              >
                {menuItem.title}
                {menuItem.subMenuItems && (
                  <span className="accordion-icon flex-none text-[1.25rem] transition-transform duration-400">
                    <FiChevronDown />
                  </span>
                )}
              </AccordionTrigger>
              <AccordionContent>
                {menuItem.subMenuItems
                  ? renderSubMenuItems(menuItem.subMenuItems)
                  : null}
              </AccordionContent>
            </AccordionItem>
          ) : // When menuItem has no subMenuItems, render it as a link
          menuItem.href ? (
            <CustomLink href={menuItem.href} className={menuItemClasses}>
              {menuItem.title}
            </CustomLink>
          ) : (
            <span className={menuItemClasses}>{menuItem.title}</span>
          )}
        </React.Fragment>
      ))}
    </Accordion>
  );
}