/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React, { useState } from "react"
import cls from "classnames"
import { navigate } from "gatsby"

import * as styles from "./index.module.scss"
import Icon from "@/components/icon"
import MobileMenuItem from "./mobile-menu-item"
import { CustomLink } from "@/components"
import { Input } from "../header-search/input"
import { getLinkWithPathPrefix } from "@/utils"
import { EN_URL, JA_URL } from "@/constants/header"

type IProps = {
  menu: IMenuItem[]
}

const MobileMenu = (props: IProps) => {
  const [openedMenu, toggleMenu] = useState("")
  const { menu } = props

  const handleToggleMenuItem = (menuId: string) => {
    toggleMenu(menuId)
  }

  const handleSearch = (e: KeyboardEvent) => {
    const {
      target: { value },
    } = e
    if (e.key === "Enter") {
      navigateFun(value)
    }
  }
  const navigateFun = (val: string) => {
    if (typeof window !== "undefined" && val) {
      const { pathname } = window.location
      const url = `/search?keywords=${val}`
      if (pathname.toLowerCase().includes("/search")) {
        location.href = url
      } else {
        navigate(url)
      }
    }
  }

  return (
    <div className={styles.mobileMenu}>
      <header className={styles.header}>
        <Input
          keyHandle={handleSearch}
          placeholder="请输入要搜索的关键字"
          className={styles.search}
        />
      </header>
      <section className={styles.section}>
        <ul className={styles.menus}>
          {menu.map(subMenu =>
            subMenu.subMenus!.length > 1 ? (
              <li
                className={cls(
                  styles.menu,
                  openedMenu === subMenu.id ? styles.isOpen : null
                )}
                key={subMenu.id}
              >
                <header
                  className={styles.menuName}
                  onClick={() => handleToggleMenuItem(subMenu.id || "")}
                >
                  <span>{subMenu.name}</span>
                  <Icon name="chevron-right" className={styles.icon} />
                </header>
                <section className={styles.subMenus}>
                  {subMenu.subMenus!.map((item, index) => (
                    <div className={styles.subMenu} key={index}>
                      <MobileMenuItem data={item} />
                    </div>
                  ))}
                </section>
              </li>
            ) : (
              <li className={cls(styles.menu)} key={subMenu.id}>
                <CustomLink
                  linkTo={
                    subMenu.subMenus![0].link
                      ? getLinkWithPathPrefix(subMenu.subMenus![0].link)
                      : ""
                  }
                  className={styles.singleLine}
                >
                  <header className={styles.menuName}>
                    {subMenu.name}
                  </header>
                </CustomLink>
              </li>
            )
          )}
          <li
            className={cls(
              styles.menu,
              openedMenu === "language" ? styles.isOpen : null
            )}
            key="language"
          >
            <header
              className={styles.menuName}
              onClick={() => handleToggleMenuItem("language")}
            >
              <span>语言</span>
              <Icon name="chevron-right" className={styles.icon} />
            </header>
            <section className={styles.subMenus}>
              <div className={styles.subMenu} key="languageEnglish">
                <MobileMenuItem
                  data={{ link: EN_URL, name: "English" }}
                />
              </div>
              <div className={styles.subMenu} key="languageJapan">
                <MobileMenuItem
                  data={{ link: JA_URL, name: "日本語" }}
                />
              </div>
            </section>
          </li>
          <li className={styles.menu} key="useFree">
            <CustomLink
              linkTo={"/product#SelectProduct"}
              className={styles.singleLine}
            >
              <header className={styles.menuName}>免费试用</header>
            </CustomLink>
          </li>
        </ul>
      </section>
    </div>
  )
}

export default MobileMenu