import { useIntl } from "react-intl"

import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import { ChevronRightSmallIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"

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

import type {
  Ancillary,
  AncillaryGridModalProps,
} from "@/types/components/myPages/myStay/ancillaries"

export default function AncillaryGridModal({
  ancillaries,
  selectedCategory,
  setSelectedCategory,
  handleCardClick,
}: AncillaryGridModalProps) {
  const intl = useIntl()
  const { isGridOpen, setGridIsOpen, setOpenedFrom } = useAddAncillaryStore()

  const handleClick = (ancillary: Ancillary["ancillaryContent"][number]) => {
    handleCardClick(ancillary)
    setOpenedFrom("grid")
    setGridIsOpen(false)
  }

  return (
    <div className={styles.modalTrigger}>
      <Button
        theme="base"
        variant="icon"
        intent="text"
        size="small"
        onClick={() => setGridIsOpen(true)}
      >
        {intl.formatMessage({ id: "View all" })}
        <ChevronRightSmallIcon
          width={20}
          height={20}
          color="baseButtonTextOnFillNormal"
        />
      </Button>
      <Modal
        isOpen={isGridOpen}
        onToggle={() => setGridIsOpen(!isGridOpen)}
        title={intl.formatMessage({ id: "Upgrade your stay" })}
      >
        <div className={styles.modalContent}>
          <div className={styles.tabs}>
            {ancillaries.map((category) => (
              <button
                key={category.categoryName}
                className={`${styles.chip} ${category.categoryName === selectedCategory ? styles.selected : ""}`}
                onClick={() => setSelectedCategory(category.categoryName)}
              >
                <Body
                  color={
                    category.categoryName === selectedCategory
                      ? "pale"
                      : "baseTextHighContrast"
                  }
                >
                  {category.categoryName}
                </Body>
              </button>
            ))}
          </div>

          <div className={styles.grid}>
            {ancillaries
              .find((category) => category.categoryName === selectedCategory)
              ?.ancillaryContent.map(({ description, ...ancillary }) => (
                <div
                  key={ancillary.id}
                  onClick={() => handleClick({ description, ...ancillary })}
                >
                  <AncillaryCard key={ancillary.id} ancillary={ancillary} />
                </div>
              ))}
          </div>
        </div>
      </Modal>
    </div>
  )
}
