import { useState } from "react";
import { useLocation } from "react-router-dom";
// import { disablePageScroll, enablePageScroll } from "scroll-lock";
import Button from "../Button/index.tsx";
import Logo from "../Logo/index.js";
import Image from "../Image/index.tsx";

// 简化版导航数据
const navigation = [
    { id: "0", title: "Features", url: "/features" },
    { id: "1", title: "Pricing", url: "/pricing" },
    { id: "2", title: "How to use", url: "/how-to-use" },
    { id: "3", title: "Roadmap", url: "/roadmap" },
];

const Header = () => {
    const [openNavigation, setOpenNavigation] = useState(false);
    const location = useLocation();

    const toggleNavigation = () => {
        setOpenNavigation(!openNavigation);
        // if (openNavigation) {
        //     enablePageScroll();
        // } else {
        //     disablePageScroll();
        // }
    };

    const handleClick = () => {
        setOpenNavigation(false);
    };

    return (
        <div
            className={`fixed top-0 left-0 z-50 w-full ${
                openNavigation ? "bg-n-8" : " bg-n-8/90 backdrop-blur-sm"
            } border-b border-n-6 lg:bg-n-8/90 lg:backdrop-blur-sm`}
        >
            <div className="flex items-center h-[4.75rem] px-5 lg:h-[5.25rem] lg:px-7.5 xl:px-10">
                <Logo className="xl:mr-8" />
                <nav
                    className={`${
                        openNavigation ? "flex" : "hidden"
                    } fixed top-[4.8125rem] left-0 right-0 bottom-0 bg-n-8 lg:static lg:flex lg:mx-auto lg:bg-transparent`}
                >
                    <div className="relative z-2 flex flex-col items-center justify-center m-auto lg:flex-row">
                        {navigation.map((item) => (
                            <a
                                className={`block relative font-code text-2xl uppercase text-n-1 transition-colors hover:text-color-1 px-6 py-6 md:py-8 lg:-mr-0.25 lg:text-xs lg:font-semibold ${
                                    item.url === location.pathname
                                        ? "z-2 lg:text-n-1"
                                        : "lg:text-n-1/50"
                                } lg:leading-5 lg:hover:text-n-1 xl:px-12`}
                                href={item.url}
                                onClick={handleClick}
                                key={item.id}
                            >
                                {item.title}
                                <div
                                    className={`hidden absolute left-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
                                        location.pathname === item.url
                                            ? "lg:h-3 lg:bg-n-1"
                                            : ""
                                    }`}
                                ></div>
                                <div
                                    className={`hidden absolute right-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
                                        location.pathname === item.url
                                            ? "lg:h-3 lg:bg-n-1"
                                            : ""
                                    }`}
                                ></div>
                            </a>
                        ))}
                    </div>
                </nav>
                
                <a
                    className="button hidden mr-8 text-n-1/50 transition-colors hover:text-n-1 lg:block"
                    href="/login"
                >
                    注册账号
                </a>
                <Button className="hidden lg:flex" href="/login">
                    登录
                </Button>
                <Button
                    className="ml-auto lg:hidden"
                    onClick={toggleNavigation}
                    px="px-3"
                >
                    <svg
                        className="overflow-visible"
                        width="20"
                        height="12"
                        viewBox="0 0 20 12"
                    >
                        <rect
                            className="transition-all origin-center"
                            y={openNavigation ? "5" : "0"}
                            width="20"
                            height="2"
                            rx="1"
                            fill="white"
                            transform={`rotate(${openNavigation ? "45" : "0"})`}
                        />
                        <rect
                            className="transition-all origin-center"
                            y={openNavigation ? "5" : "10"}
                            width="20"
                            height="2"
                            rx="1"
                            fill="white"
                            transform={`rotate(${
                                openNavigation ? "-45" : "0"
                            })`}
                        />
                    </svg>
                </Button>
            </div>
        </div>
    );
};

export default Header;