'use client';
import clsx from 'clsx';
import { usePathname } from 'next/navigation';
import { useEffect, useState, } from 'react';
import { Each } from '../../00-base';
import { List } from '../../01-atoms';
import { MenuItem } from './MenuItem';
const styleMap = {
    horizontal: 'menu--horizontal',
    vertical: 'menu--vertical',
};
const styleMapLinkHorizontal = clsx('[.menu--horizontal_&>.link]:px-2 [.menu--horizontal_&>.link]:py-3');
const styleMapLinkVertical = clsx('[.menu--vertical_&>.link]:py-2 [.menu--vertical_&>.link]:pr-4');
const styleMapLink = clsx(styleMapLinkHorizontal, styleMapLinkVertical);
const styleMapIcon = clsx('[.menu--vertical_&>.link>.icon]:absolute [.menu--vertical_&>.link>.icon]:left-4');
const styleMapToggle = clsx('[.menu--horizontal_&:hover>.link>.toggle]:rotate-180 [.menu--vertical_&.open>.link>.toggle]:rotate-180');
const styleMapSubmenuHorizontal = (level) => clsx('[.menu--horizontal_&>.submenu]:invisible [.menu--horizontal_&>.submenu]:absolute [.menu--horizontal_&>.submenu]:w-max [.menu--horizontal_&>.submenu]:max-w-full [.menu--horizontal_&>.submenu]:min-w-32 [.menu--horizontal_&>.submenu]:rounded-sm [.menu--horizontal_&>.submenu]:opacity-0 [.menu--horizontal_&>.submenu]:shadow-md', level > 1 &&
    '[.menu--horizontal_&>.submenu]:top-0 [.menu--horizontal_&>.submenu]:left-full', '[.menu--horizontal_&:hover>.submenu]:visible [.menu--horizontal_&:hover>.submenu]:opacity-100');
const styleMapSubmenuVertical = clsx('[.menu--vertical_&>.submenu]:grid [.menu--vertical_&>.submenu]:[grid-template-rows:0fr] [.menu--vertical_&>.submenu]:transition-[grid-template-rows] [.menu--vertical_&>.submenu]:duration-300 [.menu--vertical_&>.submenu]:ease-in-out', '[.menu--vertical_&.open>.submenu]:[grid-template-rows:1fr]');
const styleMapSubmenu = (level) => clsx(styleMapSubmenuHorizontal(level), styleMapSubmenuVertical);
/**
 * MenuList component for rendering a list of menu items with optional submenus.
 *
 * @component
 * @example
 * // Example usage of MenuList component
 * <MenuList
 *   orientation="vertical"
 *   menu={[
 *     { text: 'Home', path: '/home' },
 *     { text: 'About', path: '/about', submenu: [{ text: 'Team', path: '/about/team' }] }
 *   ]}
 * />
 *
 * @param {Object} props - The properties of the MenuList component.
 * @param {'horizontal' | 'vertical'} props.orientation - The orientation of the menu.
 * @param {Array<Object>} props.menu - The menu items to be displayed.
 * @param {string} props.menu.text - The text to display for the menu item.
 * @param {string} props.menu.path - The URL path the menu item links to.
 * @param {Array<Object>} [props.menu.submenu] - Optional submenu items.
 * @param {number} [props.level=1] - The nesting level of the menu.
 * @param {boolean} [props.isToggle=false] - Whether the menu items have toggle functionality.
 *
 * @returns {ReactNode} The rendered MenuList component.
 */
export function MenuList({ menu, orientation, level = 1, isToggle = false, parentOpen = true, }) {
    const pathname = usePathname();
    const [showItems, setShowItems] = useState(menu.map(() => false));
    useEffect(() => {
        if (!parentOpen) {
            setShowItems(menu.map(() => false));
        }
    }, [parentOpen, menu]);
    const toggleShowItems = (index) => {
        setShowItems((prevItems) => prevItems.map((item, i) => (i === index ? !item : false)));
    };
    if (level === 1) {
        orientation === 'vertical' ? (isToggle = true) : (isToggle = false);
    }
    return (<List orientation={orientation} className={clsx('menu', level === 1 && styleMap[orientation], orientation === 'horizontal' && 'gap-2', `level-${level}`)}>
      <Each of={menu} render={({ submenu, ...menuItem }, index) => {
            const hasSubmenu = (submenu?.length ?? 0) > 0;
            return (<li key={`${menuItem.path ?? ''}::${menuItem.text}::${index}`} onClick={() => orientation === 'horizontal' && toggleShowItems(index)} className={clsx('relative', level > 1 && 'w-full', showItems[index] && 'open', styleMapLink, styleMapIcon, styleMapToggle, styleMapSubmenu(level))}>
              <MenuItem {...menuItem} isActive={orientation === 'horizontal' && menuItem.path === pathname} onClickToggle={() => toggleShowItems(index)} toggle={hasSubmenu} level={level} isOpen={showItems[index]}/>
              {!!hasSubmenu && (<div className={clsx('submenu', level > 1 && 'top-0 left-full')}>
                  {isToggle ? (<div className="min-h-0 overflow-hidden">
                      <MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={isToggle} parentOpen={showItems[index]}/>
                    </div>) : (<MenuList orientation="vertical" menu={submenu} level={level + 1} isToggle={isToggle}/>)}
                </div>)}
            </li>);
        }}/>
    </List>);
}
//# sourceMappingURL=MenuList.jsx.map