import { JSXElement, Show, useContext } from "solid-js";
import { A } from "@solidjs/router";
import { LoginContext } from "./Root";
import { ModalContext } from "./Root";
import { Flake, Home, Plus, UserCircle } from "./Icons";

// Represents a single list item in the menu bar
function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
  return (
    <li>
      <A class="justify-center" href={props.href} end>
        {props.children}
      </A>
    </li>
  );
}

// Represents the menu bar at the top of the page
function Menu(): JSXElement {
  const login_ctx = useContext(LoginContext);
  return (
    <ul class="menu md:menu-horizontal space-y-2 md:space-x-2 md:space-y-0 rounded-box">
      <MenuItem href="/">
        <Home />
      </MenuItem>
      <Show when={login_ctx?.token()}>
        <MenuItem href="/new">
          <Plus />
        </MenuItem>
      </Show>
    </ul>
  );
}

export function Navbar(): JSXElement {
  const modal_ctx = useContext(ModalContext);
  const login_ctx = useContext(LoginContext);

  const logout = (): void => {
    localStorage.removeItem("token");
    localStorage.removeItem("username");
    login_ctx?.setToken("");
    login_ctx?.setUsername("");
  };

  const clickHandler = (): void => {
    if (login_ctx?.token() != "") logout();
    else modal_ctx?.setLoginModalOpen(true);
  };

  return (
    <div class="navbar text-neutral-content max-w-3xl max-w rounded-box md:my-4">
      <div class="flex-1">
        <A href={"/"} class="btn btn-ghost normal-case pl-1 text-xl">
          <Flake />
          FrostByte
        </A>
      </div>
      <div class="flex">
        <Menu />
      </div>
      <div class="flex-1 justify-end flex">
        <A
          href="#"
          class="btn btn-ghost capitalize pr-1 text-sm"
          onClick={clickHandler}
        >
          {
            <Show when={login_ctx?.username()} fallback="Login">
              {login_ctx?.username()}
            </Show>
          }
          <UserCircle />
        </A>
      </div>
    </div>
  );
}