import * as React from "react"
import cls from "classnames"
import * as styles from "./index.module.scss"
import StandardSubmenu from "@/components/header/menu/standard-submenu"
import TwoColumnSubmenu from "@/components/header/menu/two-column-submenu"
import ContactUsMenu from "@/components/header/menu/contact-us-menu"
import LogoMenu from "@/components/header/menu/logo-menu"
import { useEffect, useRef, useState } from "react"
import {Link} from "gatsby";

interface IProps {
  menuData: IMenuItem
  disableMenu?: boolean
}

const Menu: React.FC<IProps> = ({ menuData, disableMenu = false }) => {
  const [submenuPositionLeft, setSubmenuPosition] = useState(-16)
  const submenuRef = useRef<HTMLDivElement | null>(null)
  const [isShowSubmenu, setIsShowSubmenu] = useState(false)
  const [isMovePositionDone, setMovePositionIsDone] = useState(false)

  useEffect(() => {
    if (isMovePositionDone) return

    const screenWidth = window.innerWidth
    if (submenuRef && submenuRef.current) {
      const { right } = submenuRef.current.getBoundingClientRect()

      if (right + 60 > screenWidth) {
        setSubmenuPosition(-(right - screenWidth + 48))
        setMovePositionIsDone(true)
      }
    }
  }, [isShowSubmenu])

  return (
    <div
      className={cls("navbar-item px-5", styles.menu)}
      onMouseLeave={() => !disableMenu && setIsShowSubmenu(false)}
      onMouseEnter={() => !disableMenu && setIsShowSubmenu(true)}
    >
      <Link to={menuData.link}>
        {menuData.name}
        {isShowSubmenu && <span className={styles.triangle} />}
      </Link>
      {isShowSubmenu && (
        <div
          className={styles.submenuContainer}
          ref={submenuRef}
          style={{ left: `${submenuPositionLeft}px` }}
        >
          <div className={styles.submenu}>
            {menuData.subMenus?.map(x => {
              if (x.type === "logo") {
                return <LogoMenu key={x.name} menuData={x} />
              }
              if (x.type === "two-column") {
                return <TwoColumnSubmenu key={x.name} menuData={x} />
              }
              if (x.type === "contact-us") {
                return <ContactUsMenu key={x.name} menuData={x} />
              }
              return <StandardSubmenu key={x.name} menuData={x} />
            })}
          </div>
        </div>
      )}
    </div>
  )
}

export default Menu