import { usePathname } from 'next/navigation'
import { NavBar, NavBarMobile, NavIndicator, NavIndicators, NavLink, NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavSideMenuButtonPlaceholder, NavWrap, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar';
import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
import Links from '../public/data/navbar.json';
import { useState } from 'react';
import NavMenuFooter from './footer';

const PageNavbar = ({ mobile }: { mobile: number }) => {
  const path = usePathname();
  const [sideBarActive, setSideBarActive] = useState(true); //DEBUG: set to false

  function handleSidebar(event: any) {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      setSideBarActive(false);
      console.log(event.relatedTarget); // DEBUG
    }
    else { console.log("nah") } // DEBUG
  }

  let navbar: JSX.Element;
  if (mobile) {
    navbar = (
      <>
        <NavSideMenu onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
          <NavBarMobile>
            {Links.links.map((item) => (
              <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
                {item.name}
              </NavLink>
            ))}
            <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
              Mastodon
            </NavLink>
          </NavBarMobile>
          <NavSideMenuGhost/>
          <StyleSelector />
          <NavSideMenuGhost/>
          <NavMenuFooter />
        </NavSideMenu>
        <NavWrapMobile>
          <NavSideMenuButton onClick={() => setSideBarActive(!sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
          <NavIndicators>
            {Links.links.map((item) => (
              <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
            ))}
          </NavIndicators>
          <NavSideMenuButtonPlaceholder />
        </NavWrapMobile>
        <NavWrapMobileGhost/>
      </>
    );
  }
  else {
    navbar = (
      <NavWrap>
        <StyleSelector></StyleSelector>
        <NavBar>
          {Links.links.map((item) => (
            <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
              {item.name}
            </NavLink>
          ))}
          <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
            Mastodon
          </NavLink>
        </NavBar>
        <StyleSelectorPlaceholder></StyleSelectorPlaceholder>
      </NavWrap>
    );
  }
  return navbar;
}

export default PageNavbar;