import React, { useEffect, useState } from "react"
import { graphql, Link, useStaticQuery } from "gatsby"
import cls from "classnames"

import { Logo } from "../index"
import Menu from "@/components/header/menu/menu"
import MobileMenu from "./menu/mobile-menu"
import CustomLink from "@/components/home/latest-info/link"
import Icon from "@/components/icon"
import HeaderSearch from "./header-search"
import { EN_URL, JA_URL } from "@/constants/header"

import * as styles from "./index.module.scss"

interface IProps {
  hiddenUseFreeButton?: boolean
  hiddenGitHubIcon?: boolean
  headerExtend?: React.ReactNode
}

const githubLink = "https://github.com/pingcap"

const Header: React.FC<IProps> = ({
  hiddenUseFreeButton = false,
  hiddenGitHubIcon = false,
  headerExtend,
}) => {
  const [isOpen, toggleOpen] = useState(false)
  const [isSearchOpen, toggleSearchOpen] = useState(false)
  const [langSelector, toggleLangSelector] = useState(false)
  const data = useStaticQuery<AllStrapiMenuGroupsQuery>(graphql`
    query allStrapiMenuGroupsQuery {
      allStrapiMenuGroups(sort: { fields: order, order: ASC }) {
        nodes {
          order
          name
          subMenus {
            submenu {
              link
              name
              submenu {
                link
                name
              }
            }
            link
            name
            type
          }
          id
        }
      }
    }
  `)

  const menuItems = data.allStrapiMenuGroups.nodes || []

  const handleToggleOpen = () => {
    toggleOpen(!isOpen)
  }
  const displaySearch = (event: React.MouseEvent) => {
    event.stopPropagation()
    toggleSearchOpen(!isSearchOpen)
  }

  useEffect(() => {
    const handler = () => toggleSearchOpen(false)
    document.addEventListener("click", handler)
    return () => document.removeEventListener("click", handler)
  }, [])

  return (
    <nav
      className={cls("navbar", styles.header)}
      role="navigation"
      aria-label="main navigation"
    >
      <div
        className={cls(
          "navbar-brand",
          styles.mobileNavBar,
          isOpen ? styles.opened : null
        )}
      >
        <span>
          <Link to="/" className={cls("navbar-item", styles.logo)}>
            <Logo width={100} />
          </Link>
        </span>
        <span className={styles.mobileNavBarEnd}>
          <a
            className={cls("navbar-burger", styles.burger)}
            href={githubLink}
            target="_blank"
          >
            <Icon name="github" className={styles.icon} />
          </a>
          <a
            role="button"
            className={cls("navbar-burger", styles.burger)}
            aria-label="menu"
            aria-expanded="false"
            onClick={handleToggleOpen}
          >
            <Icon name="menu" className={styles.icon} />
          </a>
        </span>
      </div>

      {!!isOpen && <MobileMenu menu={menuItems} />}

      <div className={cls("navbar-menu", styles.desktopMenu)}>
        <div className="navbar-start">
          {menuItems.map(x => (
            <Menu key={x.name} menuData={x} disableMenu={isSearchOpen} />
          ))}
        </div>

        <div className={`navbar-end ${styles.navbarEndContent}`}>
          <div
            className={cls(
              styles.navbarEndItem,
              styles.searchWrapper,
              isSearchOpen ? styles.searchOpen : ""
            )}
          >
            <span
              className={cls(styles.icon, styles.navItem)}
              onClick={displaySearch}
            >
              <Icon name="search" />
              <span className={styles.iconLabel}>搜索</span>
            </span>
            <div
              className={cls(
                styles.searchPanel,
                isSearchOpen ? styles.searchOpen : ""
              )}
              onClick={(event: React.MouseEvent) => event.stopPropagation()}
            >
              {isSearchOpen && <HeaderSearch />}
            </div>
          </div>
          <div
            className={cls("navbar-item", styles.navItem, styles.navbarEndItem)}
          >
            <div
              className={cls(
                "dropdown is-center",
                styles.langSelector,
                langSelector ? "is-active" : null
              )}
              onMouseEnter={() => !isSearchOpen && toggleLangSelector(true)}
              onMouseLeave={() => !isSearchOpen && toggleLangSelector(false)}
            >
              <div className={"dropdown-trigger"}>
                <div
                  aria-haspopup="true"
                  aria-controls="lang-menu"
                  className={styles.trigger}
                >
                  <Icon name="language" className={styles.icon} />
                  <span className={styles.iconLabel}>语言</span>
                </div>
              </div>
              <div
                className={cls("dropdown-menu", styles.menu)}
                id="lang-menu"
                role="menu"
              >
                <div
                  className={cls("dropdown-content", styles.dropdownContent)}
                >
                  <CustomLink
                    linkTo={EN_URL}
                    className={cls("dropdown-item", styles.item)}
                  >
                    English
                  </CustomLink>
                  <CustomLink
                    linkTo={JA_URL}
                    className={cls("dropdown-item", styles.item)}
                  >
                    日本語
                  </CustomLink>
                </div>
              </div>
            </div>
          </div>
          {!hiddenGitHubIcon && (
            <div className={cls("navbar-item", styles.navbarEndItem)}>
              <a
                className={cls(styles.icon, styles.navItem)}
                href={githubLink}
                target="_blank"
              >
                <Icon name="github" />
              </a>
            </div>
          )}
          {!hiddenUseFreeButton && (
            <div className="navbar-item">
              <Link
                className={`button is-white ${styles.useFree}`}
                to="/product#SelectProduct"
              >
                免费试用
              </Link>
            </div>
          )}
          {headerExtend && <div className="navbar-item">{headerExtend}</div>}
        </div>
      </div>
    </nav>
  )
}

export default Header