"use client"

import { cx } from "class-variance-authority"
import NextLink from "next/link"
import { useRef } from "react"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useDropdownStore from "@/stores/main-menu"

import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"

import MainMenuButton from "../../MainMenuButton"
import MegaMenu from "../MegaMenu"

import styles from "./navigationMenuItem.module.css"

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"

export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
  const { openMegaMenu, toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
    useDropdownStore()
  const megaMenuRef = useRef<HTMLDivElement>(null)
  const { submenu, title, link, seeAllLink, card } = item
  const megaMenuTitle = `${title}-${isMobile ? "mobile" : "desktop"}`
  const isMegaMenuOpen = openMegaMenu === megaMenuTitle

  useHandleKeyUp((event: KeyboardEvent) => {
    if (event.key === "Escape" && isMegaMenuOpen) {
      toggleMegaMenu(false)
    }
  })

  useClickOutside(megaMenuRef, isMegaMenuOpen && !isMobile, () => {
    toggleMegaMenu(false)
  })

  function handleNavigate() {
    if (isHamburgerMenuOpen) {
      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
    }
  }

  if (submenu.length) {
    return (
      <>
        <MainMenuButton
          onPress={() => toggleMegaMenu(megaMenuTitle)}
          className={styles.navigationMenuItem}
        >
          {isMobile ? (
            <>
              <Typography variant="Title/Subtitle/lg">
                <span>{title}</span>
              </Typography>
              <MaterialIcon
                icon="arrow_forward_ios"
                size={20}
                className={styles.chevron}
                color="CurrentColor"
              />
            </>
          ) : (
            <>
              <span>{title}</span>
              <MaterialIcon
                icon="keyboard_arrow_down"
                size={20}
                className={cx(styles.chevron, {
                  [styles.isExpanded]: isMegaMenuOpen,
                })}
                color="CurrentColor"
              />
            </>
          )}
        </MainMenuButton>
        <div
          ref={megaMenuRef}
          className={cx(styles.dropdown, {
            [styles.isExpanded]: isMegaMenuOpen,
          })}
        >
          <MegaMenu
            isMobile={isMobile}
            title={title}
            seeAllLink={seeAllLink}
            submenu={submenu}
            card={card}
            isOpen={isMegaMenuOpen}
          />
        </div>
      </>
    )
  } else if (link?.url) {
    return (
      <Typography
        variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
      >
        <NextLink
          className={cx(styles.navigationMenuItem, styles.link)}
          onClick={handleNavigate}
          href={link.url}
        >
          {title}
        </NextLink>
      </Typography>
    )
  }

  return null
}