"use client"

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

import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
import Card from "@/components/TempDesignSystem/Card"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useTrapFocus } from "@/hooks/useTrapFocus"

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

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MegaMenuProps } from "@/types/components/header/megaMenu"

export default function MegaMenu({
  isMobile,
  title,
  seeAllLink,
  submenu,
  card,
}: MegaMenuProps) {
  const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
    useDropdownStore()
  const megaMenuRef = useTrapFocus()

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

  return (
    <nav className={styles.megaMenu}>
      {isMobile ? (
        <div className={styles.backWrapper}>
          <button
            type="button"
            className={styles.backButton}
            onClick={() => toggleMegaMenu(false)}
          >
            <ChevronLeftIcon color="red" />
            <Subtitle type="one" color="burgundy">
              {title}
            </Subtitle>
          </button>
        </div>
      ) : null}
      <div className={styles.megaMenuContent} ref={megaMenuRef}>
        <div className={styles.seeAllLink}>
          {seeAllLink?.link ? (
            <Link
              href={seeAllLink.link.url}
              color="burgundy"
              variant="icon"
              onClick={handleNavigate}
            >
              {seeAllLink.title}
              <ArrowRightIcon color="burgundy" />
            </Link>
          ) : null}
        </div>
        <ul className={styles.submenus}>
          {submenu.map((item) => (
            <li key={item.title} className={styles.submenusItem}>
              <Caption textTransform="uppercase" asChild>
                <span className={styles.submenuTitle}>{item.title}</span>
              </Caption>
              <ul className={styles.submenu}>
                {item.links.map(({ title, link }) =>
                  link ? (
                    <li key={title} className={styles.submenuItem}>
                      <Link
                        href={link.url}
                        variant="menu"
                        className={styles.link}
                        onClick={handleNavigate}
                      >
                        {title}
                        <ArrowRightIcon
                          color="burgundy"
                          className={styles.arrow}
                        />
                      </Link>
                    </li>
                  ) : null
                )}
              </ul>
            </li>
          ))}
        </ul>
        {card ? (
          <div className={styles.cardWrapper}>
            <Card
              className={styles.card}
              backgroundImage={card.backgroundImage}
              bodyText={card.body_text}
              heading={card.heading}
              primaryButton={card.primaryButton}
              secondaryButton={card.secondaryButton}
              scriptedTopTitle={card.scripted_top_title}
              onPrimaryButtonClick={handleNavigate}
              onSecondaryButtonClick={handleNavigate}
              imageGradient
              theme="image"
            />
          </div>
        ) : null}
      </div>
    </nav>
  )
}
