import { Link } from "react-router";
import React from "react";
import useRoutes from "~/hooks/useRoutes";
import classNames from "classnames";

interface Props {
    isOpen: boolean;
    setIsOpen: (isOpen: boolean) => void;
    handleLogout: (e: React.MouseEvent) => void;
}

const divStyles = classNames(
    'absolute', 'text-xxl', 'rounded-b', 'top-full mt-1', 'left-0', 'right-0', '', 'py-2',
    'bg-gray-600', 'border-secondary', 'shadow-md', 'flex', 'flex-col', 'space-y-3',
    'md:hidden'
)

const linkStyles = classNames(
    'border-b-2', 'border-secondary', 'uppercase',
    'text-primary', 'hover:background-secondary', 'pb-2', 'pl-5',
    'space-grotesk', 'text-xl'
)

const MobileDropdownMenu = ({ isOpen, setIsOpen, handleLogout }: Props) => {
    const routes = useRoutes();

    if (!isOpen) return null;

    return (
        <div className={divStyles}>
            <Link
                to={routes.home()}
                className={linkStyles}
                onClick={() => setIsOpen(false)}
            >
                Home
            </Link>
            <Link
                to={routes.dish.index()}
                className={linkStyles}
                onClick={() => setIsOpen(false)}
            >
                Dishes
            </Link>
            <Link
                to={routes.user.index()}
                className={linkStyles}
                onClick={() => setIsOpen(false)}
            >
                Users
            </Link>
            <Link
                to={routes.schedule.history()}
                className={linkStyles}
                onClick={() => setIsOpen(false)}
            >
                History
            </Link>
            <Link
                to={routes.auth.login()}
                onClick={handleLogout}
                className={linkStyles}>
                Logout
            </Link>
        </div>
    )
}

export default MobileDropdownMenu