"use client";
import { Button, Events } from "../../../index";
import { useState } from "react";

export default function MenuResponsive({ menu }: Menu.responsive) {
    const [view, setView] = useState<boolean>(false);

    return (
        <>
            <div
                className={`${view ? null : "opacity-0 pointer-events-none"} flex bg-black bg-opacity-40 items-end justify-end fixed top-0 left-0 h-screen w-screen transition-all lg:hidden`}
            >
                <nav className="overflow-auto scroll-smooth bg-white max-h-[320px] w-6/12 py-1 mb-24 mr-14 rounded-md shadow shadow-black text-center">
                    <ul>
                        {menu.map((item) => (
                            <li
                                key={`menu-element-${Events.Utils.slugify(item.name)}`}
                                onClick={
                                    item.subMenu
                                        ? () =>
                                              Events.Scripts.subMenu(
                                                  `menu-element-item-${Events.Utils.slugify(item.name)}`
                                              )
                                        : () => setView(false)
                                }
                            >
                                {item === menu[0] ? null : <hr />}

                                {!item.subMenu ? (
                                    <a
                                        href={item.href}
                                        target={item.target}
                                        aria-label={`Ir a ${item.name}`}
                                    >
                                        <p className="py-4">{item.name}</p>
                                    </a>
                                ) : (
                                    <p className="py-4">{item.name}</p>
                                )}

                                {item.subMenu ? (
                                    <div
                                        id={`menu-element-item-${Events.Utils.slugify(item.name)}`}
                                        className="hidden pointer-events-none bg-slate-50"
                                    >
                                        {item.subMenu.map((sub) => (
                                            <div
                                                key={`submenu-element-${Events.Utils.slugify(sub.name)}`}
                                                onClick={() => setView(false)}
                                            >
                                                <hr />
                                                <a
                                                    href={sub.href}
                                                    aria-label={`Ir a ${sub.name}`}
                                                    target={sub.target}
                                                >
                                                    <p className="py-4 text-sm">
                                                        {sub.name}
                                                    </p>
                                                </a>
                                            </div>
                                        ))}
                                    </div>
                                ) : null}
                            </li>
                        ))}
                    </ul>
                </nav>
            </div>
            <div>
                <Button.Responsive
                    onClick={() => Events.Scripts.modal(view, setView)}
                />
            </div>
        </>
    );
}