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

export default function Menu1(Props: Menu.menu1) {
    const { menu, img, alt, fixed, dark, className, button } = Props;

    function showSubMenu(
        name: string,
        show: boolean,
        event: React.MouseEvent<HTMLLIElement>
    ) {
        const containerId = `header-container-${Events.Utils.slugify(name)}`;
        const element = event.currentTarget;

        const container = document.getElementById(containerId);

        if (element && container) {
            if (show) {
                element.classList.add(
                    'background',
                    'darkContainerHover',
                    'text-white',
                    'rounded'
                );
                container.classList.remove('hidden');
            } else {
                element.classList.remove(
                    'background',
                    'darkContainerHover',
                    'text-white',
                    'rounded'
                );
                container.classList.add('hidden');
            }
        }
    }

    return (
        <div
            className={`${fixed ? 'fixed top-0 left-0' : 'block'} grid grid-cols-1 lg:grid-cols-8 w-full px-5 border-b-2 border-b-slate-100 select-none darkContainer text gap-5 ${className}`}>
            <a
                href='/'
                aria-label='Ir a la página principal'
                className='lg:col-span-1 m-auto'>
                <picture>
                    {dark && (
                        <source
                            srcSet={dark}
                            media='(prefers-color-scheme: dark)'
                        />
                    )}
                    <img
                        className='m-auto lg:my-0 w-7/12 md:w-full h-auto'
                        src={img}
                        alt={alt}
                    />
                </picture>
            </a>
            <div className='hidden lg:grid lg:col-span-7 lg:grid-cols-7'>
                <nav className='hidden lg:block lg:col-span-5 py-5'>
                    <ul className='flex'>
                        {menu.map((item) => (
                            <li
                                key={`header-element-${Events.Utils.slugify(item.name)}`}
                                id={`header-element-${Events.Utils.slugify(item.name)}`}
                                onMouseOver={
                                    item.subMenu
                                        ? (e) => showSubMenu(item.name, true, e)
                                        : undefined
                                }
                                onMouseLeave={
                                    item.subMenu
                                        ? (e) =>
                                              showSubMenu(item.name, false, e)
                                        : undefined
                                }>
                                {item.subMenu ? (
                                    <>
                                        <p
                                            className={`py-3 px-2 rounded hover:shadow-xl text-base transition-all cursor-pointer hover:text-white hover:background darkContainerHover`}>
                                            {item.name}
                                        </p>
                                        <div
                                            id={`header-container-${Events.Utils.slugify(item.name)}`}
                                            className='absolute hidden w-auto py-1 rounded-md shadow text-center bg-white cursor-pointer darkAltContainer'>
                                            {item.subMenu.map((sub) => (
                                                <div
                                                    className='hover:text-white text-gray-700 hover:background darkContainerHover text'
                                                    key={`header-sub-element-${Events.Utils.slugify(sub.name)}`}>
                                                    <a
                                                        href={sub.href}
                                                        aria-label={
                                                            item.ariaLabel
                                                        }
                                                        target={
                                                            item.target ||
                                                            '_self'
                                                        }
                                                        rel={item.rel || 'tag'}>
                                                        <p className='p-3'>
                                                            {sub.name}
                                                        </p>
                                                    </a>
                                                </div>
                                            ))}
                                        </div>
                                    </>
                                ) : (
                                    <a
                                        href={item.href}
                                        aria-label={item.ariaLabel}
                                        target={item.target || '_self'}
                                        rel={item.rel || 'tag'}>
                                        <p
                                            className={`py-3 px-2 rounded hover:shadow-xl text-base transition-all cursor-pointer hover:text-white hover:background darkContainerHover`}>
                                            {item.name}
                                        </p>
                                    </a>
                                )}
                            </li>
                        ))}
                    </ul>
                </nav>
                {button && (
                    <div className='hidden lg:block lg:col-span-2 m-auto'>
                        <Button.Button1
                            name={button.name}
                            href={button.href}
                            ariaLabel={button.ariaLabel}
                            rel={button.rel || 'tag'}
                            id={button.id}
                            className={`${button.className}`}
                            type={button.type || 'button'}
                            target={button.target || '_self'}
                        />
                    </div>
                )}
            </div>
        </div>
    );
}