import clsx from "clsx";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useMemo, useState } from "react";
import ClickAwayListener from "@mui/base/ClickAwayListener";

import useStore from "libs/hooks/useStore";
import toggleTheme from "libs/toggleTheme";

export default function Header() {
  const store = useStore();
  const [open, setOpen] = useState(false);
  const { pathname } = useRouter();
  const needSearch = useMemo(() => {
    return !/\/novels/.test(pathname);
  }, [pathname]);

  const toggleMenu = useCallback(() => {
    setOpen((o) => !o);
  }, []);

  const closeMenu = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <header className={clsx("header", { open })}>
      <ClickAwayListener onClickAway={closeMenu}>
        <div className="container">
          {pathname === "/" ? (
            <h1 className="flex-shrink-0">
              <Link
                href="/"
                className="logo mr-5"
                title="NovelDit"
                onClick={closeMenu}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src="/logo.svg" alt="NovelDit" />
                <span>NovelDit</span>
              </Link>
            </h1>
          ) : (
            <Link
              href="/"
              className="logo mr-5"
              title="NovelDit"
              onClick={closeMenu}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src="/logo.svg" alt="NovelDit" />
              <span>NovelDit</span>
            </Link>
          )}
          <div className="menu">
            <nav>
              <ul>
                <li>
                  <Link
                    className="menu-item"
                    href="/novels"
                    title="Genre"
                    onClick={closeMenu}
                  >
                    <svg width="24" height="24">
                      <use xlinkHref="/icons.svg#books"></use>
                    </svg>
                    <strong>Genre</strong>
                  </Link>
                  <div className="sub-menu">
                    <ul className="sub-menu-items">
                      {store.genre.map((item) => (
                        <li key={item.uri}>
                          <Link href={`/novels/${item.uri}`} title={item.name}>
                            {item.name}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                </li>
                <li>
                  <Link
                    className="menu-item"
                    href="/library"
                    title="Library"
                    onClick={closeMenu}
                  >
                    <svg width="24" height="24">
                      <use xlinkHref="/icons.svg#bookmark"></use>
                    </svg>
                    <strong>Library</strong>
                  </Link>
                </li>
              </ul>
            </nav>
            {needSearch ? (
              <form action="/novels" className="search-input">
                <svg className="icon-search">
                  <use xlinkHref="/icons.svg#search"></use>
                </svg>
                <input type="search" name="q" placeholder="Search" />
              </form>
            ) : null}
          </div>
          <div className="buttons">
            <button className="btn" onClick={() => toggleTheme()}>
              <svg className="icon-sun" viewBox="0 0 16 16">
                <use xlinkHref="/icons.svg#sun"></use>
              </svg>
              <svg className="icon-moon" viewBox="0 0 16 16">
                <use xlinkHref="/icons.svg#moon"></use>
              </svg>
            </button>
            <button className="btn menu-btn" onClick={toggleMenu}>
              <svg
                className="icon-menu"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 16 16"
              >
                <rect
                  x="1"
                  y="4"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-1"
                ></rect>
                <rect
                  x="1"
                  y="7.25"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-2"
                ></rect>
                <rect
                  x="1"
                  y="10.5"
                  width="14"
                  height="1.5"
                  rx="1"
                  className="r-3"
                ></rect>
              </svg>
            </button>
          </div>
        </div>
      </ClickAwayListener>
    </header>
  );
}