// @ts-ignore
import { useEffect, useState } from 'react'
import { useMediaQuery } from "hooks/useMediaQuery"
import Link from 'next/link'
import { motion } from "framer-motion";
import styles from 'styles/NavBar.module.css'
// import AccountIcon from './AccountIcon';
// import { FaHome, FaInfoCircle, FaTrophy, FaWrench } from 'react-icons/fa';
// import {BsFillPersonFill} from "react-icons/bs"
// import {GiDropWeapon} from "react-icons/gi"
// import {IoIosStats} from "react-icons/io"
import type { NextRouter } from 'next/router'
import NavBarBG from './SVGs/NavBarBG';
import BurgerMenu from './SVGs/BurgerMenu';
import BurgerMenuClose from './SVGs/BurgerMenuClose';
// import Image from 'next/image';
let nav_items = [
    { text: "Home", to: "/", },
    { text: "Players", to: "/player", },
    { text: "Legends", to: "/legends" },
    { text: "Weapons", to: "/weapons", },
    { text: "Leaderboards", to: "/leaderboard", },
    // { text: "Tier Lists", to: "/tierlist", },
    { text: "Power Rankings", to: "/pr", },
    { text: "Clans", to: "/clan", },
    { text: "About", to: "/about" },
]

const NavBar = ({router}:props) => {
    const [path, setPath] = useState(router?.asPath || "")
    useEffect(() => {
        setPath(router?.asPath || "")
    }, [router?.asPath])
    let isSmall = useMediaQuery({ maxWidth: "1380px" })
    
    return isSmall ? <MobileNavbar path={path} /> : (
        <div className='w-full  font-LuckiestGuy'>
        <NavBarBG style={{
            position: "absolute",
            zIndex: -10,
            minHeight: "10vh",
            maxWidth: "200vw"
}} />
        <div className={styles.navbar_items_wrapper}>

                            {nav_items.map((item, index) => <NavbarItem selected={item.to === "/" ? path === item.to : path?.startsWith(item.to)} key={`navbar_item_${index}`} {...item} />)}
                            </div>

        </div>
    )
}
const NavbarItem = ({ text = "Placeholder", to = "/", selected = false }:NavbarItemProps) => {
    let isTextLong = text.length > 10
    return (
        <Link href={to} passHref>
            <a data-selected={selected} className={styles.nav_item}>
                <span className={isTextLong ? styles.long_text_wrapper : styles.nav_text_wrapper}>
                    {text}
                </span>
            </a>
        </Link>
    )
}
const MobileNavbar = ({ top = "0%", path }:MobileNavbarProps) => {
    const [open, setOpen] = useState(false);
    return (
<>
<div onClick={!open ? () => setOpen(true) : () => setOpen(false)} className='z-10 pl-2 absolute pt-1'>
{open ? <BurgerMenuClose size={1.5} /> : <BurgerMenu size={1.5} />}

</div>
{open ? <div className={`w-[100vw] flex-col flex h-[40vh] bg-common-white pt-8`}>
{nav_items.map((item, index) => <MobileNavbarItem selected={item.to === "/" ? path === item.to : path?.startsWith(item.to)} key={`m_navbar_item_${index}`} {...item} />)}
</div> : null}
<NavBarBG style={{
            position: "absolute",
            zIndex: -10,
            minHeight: "10vh",
            maxWidth: "500vw"
}} />

</>
    )
}

const MobileNavbarItem = ({ text = "Placeholder", to = "/", selected = false  }:MobileNavbarItemProps) => {
    return (
        <Link href={to} passHref>
            <a data-selected={selected} className={styles.item}>
                {text}
            </a>
        </Link>
    )
}
const Path = (props:any) => (
    <motion.path
        fill="transparent"
        strokeWidth="3"
        strokeLinecap="round"
        {...props}
    />
);
const MenuToggle = ({ toggleOpen }:MenuToggleProps) => {

    return (
        <button className='float-right grid place-items-center' onClick={toggleOpen}>
            <svg color={"white"} className={styles.burger_menu} width="23" height="23" viewBox="0 0 23 23">
                <Path
                    variants={{
                        closed: { d: "M 2 2.5 L 20 2.5" },
                        open: { d: "M 3 16.5 L 17 2.5" }
                    }}
                />
                <Path
                    d="M 2 9.423 L 20 9.423"
                    variants={{
                        closed: { opacity: 1 },
                        open: { opacity: 0 }
                    }}
                    transition={{ duration: 0.1 }}
                />
                <Path
                    variants={{
                        closed: { d: "M 2 16.346 L 20 16.346" },
                        open: { d: "M 3 2.5 L 17 16.346" }
                    }}
                />
            </svg>
        </button>
    )
};

interface props {
    router?: NextRouter
}
interface NavbarItemProps {
    text: string,
    to: string,
    selected: boolean
}

interface MobileNavbarProps {
    top: string
    path: string
}
interface MobileNavbarItemProps {
    text: string,
    to: string,
    selected: boolean
}

interface MenuToggleProps {
    toggleOpen: () => void
}
export default NavBar