"use client"
import { useEffect, useRef, useState, SetStateAction, Dispatch } from "react";
import { AnimatePresence, motion, Variants } from "motion/react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { useMotionValueEvent, useScroll } from "motion/react";
import {
    AlignJustify
} from "lucide-react";
import { Menu, X } from "lucide-react";
import { useWindowSize } from "@/hooks/useWindowSize";

export interface NavItem {
    title: string;
    href: string;
}

const links: NavItem[] = [
    {
        title: "Home",
        href: ""
    },
    {
        title: "Products",
        href: ""
    },
    {
        title: "Pricing",
        href: ""
    },
    {
        title: "Contact",
        href: ""
    }
]

interface RevealNavBarProps {
  className?: string;
  items?: NavItem[];
}

interface NavItemsProps {
    className?: string;
}

interface MobileNavButtonProps {
    className?: string;
    setIsMenuOpen: Dispatch<SetStateAction<boolean>>
    isMenuOpen: boolean;
}


interface NavItemsProps {
    className?: string;
    items?: NavItem[];
}

interface MobileNavProps {
    className?: string;
    setIsMenuOpen: Dispatch<SetStateAction<boolean>>;
    items?: NavItem[];
}

function RevealNavBar({
  className,
  items = links,
}: RevealNavBarProps) {
    const ref = useRef<HTMLDivElement>(null);
    const prevScroll = useRef(0);
    const [isNavHidden, setIsNavHidden] = useState(false);
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const { width } = useWindowSize();

    const isDesktop = width >= 1024;

    const { scrollY } = useScroll({
        target: ref,
        offset: ["start start", "end start"],
    });

    const [shadow, setShadow] = useState<boolean>(false);

    useMotionValueEvent(scrollY, "change", (latest) => {
        if (latest > prevScroll.current) {
            if (latest > 50 && isDesktop) {
                setIsNavHidden(true);
            }
        } else if (latest < prevScroll.current) {
            setIsNavHidden(false);
        }
        prevScroll.current = latest;
        if (latest > 10) {
            setShadow(true);
        } else {
            setShadow(false);
        }
    });

    const toggleNav = () => {
        setIsNavHidden(!isNavHidden);
    };

    const springConfig = {
        type: "spring",
        stiffness: 250,
        damping: 30,
        mass: 1
    };

    const navConfig = {
        type: "spring",
        stiffness: 250,
        damping: 30,
        mass: 1
    };

    return (
        <header ref={ref} className="w-full sticky top-0 pt-15 pb-10 flex justify-center">
            <div
                className="relative xl:w-3/5 lg:w-4/5 md:w-11/12 w-full flex justify-center"
            >
                <motion.nav
                    className={cn("relative max-w-full w-full bg-white dark:bg-neutral-950 rounded-4xl px-1.5 py-2 flex items-center justify-between")}
                    animate={{
                        boxShadow: shadow
                            ? "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, 0 16px 68px rgba(47, 48, 55, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.5) 0px -4px 6px -6.1px inset"
                            : "none",
                        y: isNavHidden ? -200 : 0,
                    }}
                    transition={springConfig}
                >
                    <div className="flex w-3/4 items-center justify-start">
                        <h2 className="text-2xl mx-7 font-medium"> Kinesis/ui </h2>
                        <NavItems className="hidden lg:flex" />
                    </div>

                    <div className="hidden lg:block">
                        <Link href="" className="relative right-[117px]">Login</Link>
                    </div>

                    <MobileNavButton setIsMenuOpen={setIsMenuOpen} isMenuOpen={isMenuOpen} />
                </motion.nav>

                <div className="hidden lg:flex absolute top-[6px] right-[-48px] gap-4 z-50">
                    <motion.button
                        className="relative z-[51] cursor-pointer w-[106px] py-2 px-5   font-medium text-neutral-100 bg-neutral-900 dark:bg-amber-50 dark:text-neutral-950 rounded-full"
                        animate={{
                            right: isNavHidden ? "50px" : "0px"
                        }}
                        transition={springConfig}
                    >
                        Try Now
                    </motion.button>

                    <motion.button
                        className="relative right-[55px] cursor-pointer py-2.5 px-3 text-neutral-100 bg-neutral-900 dark:bg-amber-50 dark:text-neutral-950 rounded-full"
                        onClick={toggleNav}
                        initial={{
                            opacity: isNavHidden ? 0 : 0,
                            scale: isNavHidden ? 0 : 0
                        }}
                        animate={{
                            opacity: isNavHidden ? 1 : 0,
                            scale: isNavHidden ? 1 : 0
                        }}
                        transition={springConfig}
                    >
                        <AlignJustify className="h-4 w-4" />
                    </motion.button>
                </div>
                {isMenuOpen && (
                    <MobileNav setIsMenuOpen={setIsMenuOpen} items={items} />
                )}
            </div>
        </header>
    )
}


function MobileNavButton({ className, setIsMenuOpen, isMenuOpen }: MobileNavButtonProps) {
    const transitionConfig = {
        type: "spring",
        stiffness: 400,
        damping: 25,
    };
    const buttonVariants: Variants = {
        initial: { scale: 0, opacity: 0 },
        animate: {
            scale: 1,
            opacity: 1,
            transition: transitionConfig,
        },
        tap: {
            scale: 0.8,
            transition: transitionConfig,
        },
    };
    return (
        <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className={cn("lg:hidden p-2 text-neutral-500 z-[50]", className)}
        >
            <AnimatePresence mode="wait" initial={false}>
                {isMenuOpen ? (
                    <motion.div
                        key="close"
                        variants={buttonVariants}
                        initial="initial"
                        animate="animate"
                        whileTap="tap"
                        className="w-full flex items-center h-[50px] gap-2"
                    >
                        <Link
                            href=""
                            className="text-lg font-bold dark:text-neutral-300 text-neutral-800 hover:text-neutral-950 dark:hover:text-neutral-300 py-2 px-5"
                            onClick={() => setIsMenuOpen(false)}
                        >
                            Login
                        </Link>
                        <div className="rounded-full p-3 bg-neutral-900 text-neutral-100">
                            <X size={24} />
                        </div>
                    </motion.div>
                ) : (
                    <motion.div
                        key="menu"
                        variants={buttonVariants}
                        initial="initial"
                        animate="animate"
                        whileTap="tap"
                        className="rounded-full p-3 bg-neutral-300 dark:text-neutral-50 dark:bg-neutral-800"
                    >
                        <Menu size={24} />
                    </motion.div>
                )}
            </AnimatePresence>
        </button>
    )
}

function MobileNav({ className, setIsMenuOpen, items }: MobileNavProps) {
    return (
        <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className={cn("fixed lg:hidden top-0 left-0 right-0 bg-white dark:bg-neutral-950 shadow-lg mx-4 rounded-xl p-6 h-screen", className)}
        >
            <div className="flex flex-col gap-4 relative top-[100px]">
                {items?.map((item, index) => (
                    <Link
                        key={index}
                        href={item.href}
                        className="text-xl font-medium text-neutral-500 hover:text-neutral-950 dark:hover:text-neutral-300 py-2"
                        onClick={() => setIsMenuOpen(false)}
                    >
                        {item.title}
                    </Link>
                ))}
                <div className="border-t pt-4 mt-2 flex flex-col items-center justify-center">
                    <button className="w-1/2 py-3 px-5 font-medium text-neutral-100 bg-neutral-900 dark:bg-amber-50 dark:text-neutral-950 rounded-full">
                        Try Now
                    </button>
                </div>
            </div>
        </motion.div>
    )
}

function NavItems({ className }: NavItemsProps) {
    const [hovered, setHovered] = useState<number | null>(null);

    const springConfig = {
        type: "spring",
        duration: 0.1,
        stiffness: 500,
        damping: 35,
        mass: 1,
        restDelta: 1
    };

    return (
        <div className={cn("min-w-1/2 flex items-center justify-center", className)}>
            {links.map((item, index) => (
                <Link
                    key={index}
                    onMouseEnter={() =>
                        setHovered(index)
                    }
                    onMouseLeave={() =>
                        setHovered(null)
                    }
                    className={cn("group w-full relative text-center py-1.5 text-zinc-500 no-underline leading-relaxed")}
                    href={item.href}
                >
                    {hovered === index &&
                        <motion.div
                            layoutId="hovered"
                            className="absolute inset-0 rounded-full w-full h-full bg-neutral-500/10 dark:bg-neutral-500/20"
                            transition={springConfig}
                            initial={{ opacity: 0.7 }}
                            animate={{ opacity: 1 }}
                        >
                        </motion.div>
                    }
                    <motion.span
                        className={"text-sm font-medium text-neutral-600/80 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-neutral-200"}>
                        {item.title}
                    </motion.span>
                </Link>
            ))}
        </div>
    )
}

export default RevealNavBar
Navbars

Reveal Navbar

Install Reveal Navbar

Variants

Simple Resizable Navbar

Install Resizable Navbar

Hover Animation

Install Hover Navbar

Click Animation

Install Click Navbar
