'use client';
import { Events } from '../../../index';

export default function Menu2(Props: Menu.menu2) {
    const {
        menu,
        img,
        dark,
        alt,
        button,
        position = null,
        imgHeight = 'max-h-[75px]',
    } = Props;

    function showSubMenu(id: string, show: boolean) {
        const bubble = document.getElementById(id) as HTMLElement;

        if (show) {
            bubble.classList.remove('hidden');
        } else {
            bubble.classList.add('hidden');
        }
    }

    return (
        <div
            className={`${position ? `${position}` : 'shadow'} px-20 flex select-none w-[100%] darkContainer`}>
            <a
                href='/'
                aria-label='Ir a la página principal'
                className='ml-0 my-auto'>
                <picture>
                    {dark && (
                        <source
                            srcSet={dark}
                            media='(prefers-color-scheme: dark)'
                        />
                    )}
                    <img className={`ml-0 ${imgHeight}`} src={img} alt={alt} />
                </picture>
            </a>

            <nav
                className={`p-4 text-right ml-auto mr-0 text-sm dark:text-white ${position ? 'text-white' : 'text-[#555]'}`}>
                <ul className='inline-flex gap-5 uppercase'>
                    {menu.map(
                        ({ name, href, ariaLabel, rel, subMenu, target }) =>
                            subMenu ? (
                                <div
                                    className='cursor-pointer p-4'
                                    key={`menu-${Events.Utils.slugify(name)}`}
                                    onMouseLeave={() =>
                                        showSubMenu(
                                            `menu-${Events.Utils.slugify(name)}`,
                                            false
                                        )
                                    }>
                                    <li
                                        className='hover:text-[#bbb] transition-all'
                                        onMouseOver={() =>
                                            showSubMenu(
                                                `menu-${Events.Utils.slugify(name)}`,
                                                true
                                            )
                                        }>
                                        {name}
                                    </li>
                                    <ul
                                        className={`hidden ${position ? 'bg-[#000]/30' : 'bg-white'} darkAltContainer rounded-sm absolute mt-4 py-4 px-8 shadow`}
                                        id={`menu-${Events.Utils.slugify(name)}`}>
                                        {subMenu.map((item) => (
                                            <a
                                                href={item.href}
                                                aria-label={item.ariaLabel}
                                                rel={item.rel}
                                                target={item.target}
                                                key={`subMenu-${Events.Utils.slugify(item.name)}`}>
                                                <li className='my-2 text-left hover:text-[#aaa]'>
                                                    {item.name}
                                                </li>
                                            </a>
                                        ))}
                                    </ul>
                                </div>
                            ) : (
                                <a
                                    href={href}
                                    aria-label={ariaLabel}
                                    rel={rel}
                                    target={target}
                                    key={`menu-${Events.Utils.slugify(name)}`}>
                                    <li className='hover:text-[#bbb] p-4 transition-all'>
                                        {name}
                                    </li>
                                </a>
                            )
                    )}
                    {button && (
                        <a href={button.href} aria-label={button.ariaLabel}>
                            <li className='hover:text-[#aaa] p-4'>
                                {button.name}
                            </li>
                        </a>
                    )}
                </ul>
            </nav>
        </div>
    );
}