"use client"

import FocusLock from "react-focus-lock"

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

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

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 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,
  isOpen,
}: MegaMenuProps) {
  const { toggleMegaMenu, toggleDropdown, isHamburgerMenuOpen } =
    useDropdownStore()

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

  return (
    <FocusLock disabled={!isOpen} returnFocus={true}>
      <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
        {isMobile ? (
          <div className={styles.backWrapper}>
            <button
              type="button"
              className={styles.backButton}
              onClick={() => toggleMegaMenu(false)}
            >
              <MaterialIcon
                icon="chevron_left"
                size={20}
                color="Icon/Interactive/Accent"
              />
              <Subtitle type="one" color="burgundy" asChild>
                <span>{title}</span>
              </Subtitle>
            </button>
          </div>
        ) : null}
        <div className={styles.megaMenuContent}>
          <div className={styles.seeAllLink}>
            {seeAllLink?.link ? (
              <Link
                href={seeAllLink.link.url}
                color="burgundy"
                variant="icon"
                weight="bold"
                onClick={handleNavigate}
              >
                {seeAllLink.title}
                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
              </Link>
            ) : null}
          </div>
          <ul className={styles.submenus}>
            {submenu.map((item) => (
              <li key={item.title} className={styles.submenusItem}>
                <Caption
                  type="label"
                  color="uiTextPlaceholder"
                  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}
                          <MaterialIcon
                            icon="arrow_forward"
                            color="Icon/Interactive/Default"
                            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"
                height="dynamic"
              />
            </div>
          ) : null}
        </div>
      </nav>
    </FocusLock>
  )
}