"use client";

import * as Sheet from "@/components/ui/sheet";
import { getContactLink, navLinks, TRANSITION_COLORS } from "@/lib/constants";
import { cn } from "@/lib/utils";
import { Menu } from "lucide-react";
import React from "react";
import Logo from "../atoms/logo";
import SpectrumAuthorizedResellerLogo from "../atoms/spectrum-authorized-reseller-logo";
import MaxWidthWrapper from "../other/max.width.wrapper";
import { Button } from "../ui/button";
import CallButton from "./CallButton";

function Navbar({
    page,
    variant = "blue",
}: {
    page: string;
    variant?: "blue" | "amber";
}) {
    const [open, setOpen] = React.useState(false);

    const [scrolledPos, setScrolledPos] = React.useState(0);

    React.useEffect(() => {
        window.addEventListener("scroll", () => {
            setScrolledPos(window.scrollY);
        });
    }, []);

    const bgColor = variant === "blue" ? "bg-blue-900/90" : "bg-blue-950/90";

    return (
        <>
            <nav
                className={cn(
                    "fixed z-999 grid w-screen place-items-center p-2 md:p-4 lg:p-6",
                )}
            >
                <MaxWidthWrapper
                    className={cn(
                        "flex items-center justify-between rounded-lg py-4",
                        scrolledPos > 50
                            ? `${bgColor} backdrop-blur-md`
                            : "bg-transparent",
                        TRANSITION_COLORS,
                    )}
                >
                    <a href="/" className={cn("cursor-pointer")}>
                        <div className="flex items-center gap-1">
                            <SpectrumAuthorizedResellerLogo />
                            <div className="hidden md:block">
                                <Logo />
                            </div>
                        </div>
                    </a>

                    <div className="hidden items-center gap-8 lg:flex xl:gap-12">
                        {navLinks.map((link, i) => (
                            <a
                                key={i}
                                href={link.href}
                                className="hidden text-lg text-blue-50 md:block"
                            >
                                {link.label}
                            </a>
                        ))}

                        <CallButton variant={variant} page={page} />
                    </div>

                    <Button
                        className="lg:hidden"
                        onClick={() => setOpen(true)}
                        variant={"ghost"}
                        size={"icon"}
                    >
                        <Menu className="h-6 w-6 text-blue-50 hover:text-blue-400" />
                    </Button>
                </MaxWidthWrapper>
            </nav>

            <Sheet.Sheet open={open} onOpenChange={(o) => setOpen(o)}>
                <Sheet.SheetContent
                    className="z-1000 flex flex-col lg:hidden"
                    side="bottom"
                >
                    <ul className="flex flex-col gap-8 pt-8">
                        {navLinks.map((nl, i) => (
                            <li
                                key={i}
                                onClick={() => {
                                    setOpen(false);
                                }}
                            >
                                <a href={nl.href}>
                                    <Button
                                        variant={"ghost"}
                                        className="w-full items-start justify-start text-start"
                                        onClick={() => {
                                            setOpen(false);
                                        }}
                                    >
                                        {nl.label}
                                    </Button>
                                </a>
                            </li>
                        ))}

                        <a href={getContactLink(page)}>
                            <Button
                                variant={variant}
                                className="w-full"
                                onClick={() => {
                                    setOpen(false);
                                }}
                            >
                                Call Now
                            </Button>
                        </a>
                    </ul>
                </Sheet.SheetContent>
            </Sheet.Sheet>
        </>
    );
}

export default Navbar;
