"use client"

import { cx } from "class-variance-authority"
import { Button as ButtonRAC } from "react-aria-components"
import FocusLock from "react-focus-lock"

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

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

import { MenuLink } from "../../MenuLink"

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={cx(styles.megaMenu, { [styles.active]: isOpen })}>
        {isMobile ? (
          <div className={styles.backWrapper}>
            <Typography variant="Title/Subtitle/lg">
              <ButtonRAC
                className={styles.backButton}
                onPress={() => toggleMegaMenu(false)}
              >
                <MaterialIcon
                  icon="arrow_back_ios"
                  size={20}
                  color="CurrentColor"
                />
                <span>{title}</span>
              </ButtonRAC>
            </Typography>
          </div>
        ) : null}
        <div className={styles.megaMenuContent}>
          <div className={styles.seeAllLinkWrapper}>
            {seeAllLink?.url ? (
              <ButtonLink
                href={seeAllLink.url}
                variant="Text"
                onClick={handleNavigate}
                wrapping={false}
              >
                {seeAllLink.title}
                <MaterialIcon
                  icon="arrow_forward"
                  color="CurrentColor"
                  size={24}
                />
              </ButtonLink>
            ) : null}
          </div>
          <div className={styles.submenus}>
            {submenu.map((item) => (
              <div key={item.title} className={styles.submenusItem}>
                <Typography variant="Title/Overline/sm">
                  <span className={styles.submenuTitle}>{item.title}</span>
                </Typography>
                <ul className={styles.submenu}>
                  {item.links.map(({ title, url }) =>
                    url ? (
                      <li key={title}>
                        <MenuLink href={url} onClick={handleNavigate}>
                          {title}
                        </MenuLink>
                      </li>
                    ) : null
                  )}
                </ul>
              </div>
            ))}
          </div>
          {card ? (
            <div className={styles.cardWrapper}>
              <InfoCard
                className={styles.card}
                {...card}
                theme={card.backgroundImage ? "Image" : "Primary 1"}
                height="dynamic"
              />
            </div>
          ) : null}
        </div>
      </nav>
    </FocusLock>
  )
}