import { useCallback, useContext, useState } from "react";
import clsx from "clsx";
import Link from "next/link";
import ClickAwayListener from "@mui/base/ClickAwayListener";
import { Context } from "../../../libs/context";
import toggleTheme from "../../../libs/toggleTheme";

export default function Header() {
  const store = useContext(Context);
  const [open, setOpen] = useState(false);

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

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

  return (
    <header className={clsx("header", { open })}>
      <ClickAwayListener onClickAway={closeMenu}>
        <div className="container">
          <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 href="/icons.svg#browse"></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>
              </ul>
            </nav>
            <form action="./search" className="search-input">
              <svg className="icon-search">
                <use href="/icons.svg#search"></use>
              </svg>
              <input type="search" name="q" placeholder="Search" />
            </form>
          </div>
          <div className="buttons">
            <button className="btn" onClick={() => toggleTheme()}>
              <svg className="icon-sun" viewBox="0 0 16 16">
                <use href="/icons.svg#sun"></use>
              </svg>
              <svg className="icon-moon" viewBox="0 0 16 16">
                <use href="/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>
  );
}