import React from "react";
import Image from "next/image";
import {
    Navbar as MTNavbar,
    Collapse,
    IconButton,
    Typography,
    Button,
} from "@material-tailwind/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";

interface NavItemProps {
    children: React.ReactNode;
    onClick?: () => void;
}
function NavItem({ children, onClick }: NavItemProps) {
    return (
        <li>
            <Typography
                as="a"
                href="#"
                variant="small"
                className="font-medium cursor-pointer"
                onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onClick?.();
                }}
            >
                {children}
            </Typography>
        </li>
    );
}

export function Navbar() {
    const [open, setOpen] = React.useState(false);
    const [isScrolling, setIsScrolling] = React.useState(false);

    function handleOpen() {
        setOpen((cur) => !cur);
    }

    const scrollToTop = () => {
        setOpen(false);
        setTimeout(() => {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }, 100);
    };

    const scrollToMiddle = () => {
        setOpen(false);
        setTimeout(() => {
            const isMobile = window.innerWidth < 960;
            const adjustment = isMobile ? -600 : -750;
            const middlePosition = (document.documentElement.scrollHeight / 2 - window.innerHeight / 2) + adjustment;
            window.scrollTo({
                top: middlePosition,
                behavior: "smooth"
            });
        }, 100);
    };

    const scrollToBottom = () => {
        setOpen(false);
        setTimeout(() => {
            window.scrollTo({
                top: document.documentElement.scrollHeight,
                behavior: "smooth"
            });
        }, 100);
    };

    React.useEffect(() => {
        window.addEventListener(
            "resize",
            () => window.innerWidth >= 960 && setOpen(false)
        );
    }, []);

    React.useEffect(() => {
        function handleScroll() {
            if (window.scrollY > 0) {
                setIsScrolling(true);
            } else {
                setIsScrolling(false);
            }
        }

        window.addEventListener("scroll", handleScroll);

        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <MTNavbar
            fullWidth
            shadow={false}
            blurred={false}
            color={isScrolling ? "white" : "transparent"}
            className="fixed top-0 z-50 border-0"
        >
            <div className="container mx-auto flex items-center justify-between">
                <Image
                    src={isScrolling ? "/image/Recurso18.svg" : "/image/Recurso20.svg"}
                    alt="Vamos App"
                    width={120}
                    height={40}
                    className="h-5 w-auto"
                />
                <ul
                    className="ml-10 hidden items-center gap-40 lg:flex"
                    style={{ color: isScrolling ? '#001227' : 'white' }}
                >
                    <NavItem onClick={scrollToTop}>Inicio</NavItem>
                    <NavItem onClick={scrollToMiddle}>Proyecto</NavItem>
                    <NavItem onClick={scrollToBottom}>Contacto</NavItem>
                </ul>
                <IconButton
                    variant="text"
                    color={isScrolling ? "gray" : "white"}
                    onClick={handleOpen}
                    className="ml-auto inline-block lg:hidden"
                >
                    {open ? (
                        <XMarkIcon strokeWidth={2} className="h-6 w-6" />
                    ) : (
                        <Bars3Icon strokeWidth={2} className="h-6 w-6" />
                    )}
                </IconButton>
            </div>
            <Collapse open={open}>
                <div className="container mx-auto mt-4 rounded-lg border-t border-blue-gray-50 bg-white px-6 py-5">
                    <ul className="flex flex-col gap-4" style={{ color: '#001227' }}>
                        <NavItem onClick={scrollToTop}>Inicio</NavItem>
                        <NavItem onClick={scrollToMiddle}>Proyecto</NavItem>
                        <NavItem onClick={scrollToBottom}>Contacto</NavItem>
                    </ul>
                </div>
            </Collapse>
        </MTNavbar>
    );
}

export default Navbar;