web/components/HotelReservation/MyStay/Ancillaries/index.tsx

"use client"
import { useState } from "react"
import { useIntl } from "react-intl"

import { Carousel } from "@/components/Carousel"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

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

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

export function Ancillaries({ ancillaries }: AncillariesProps) {
  const intl = useIntl()
  const [selectedCategory, setSelectedCategory] = useState<string | null>(
    () => {
      return ancillaries?.[0]?.categoryName ?? null
    }
  )

  if (!ancillaries?.length) {
    return null
  }

  function mergeAncillaries(
    ancillaries: Ancillaries
  ): Ancillary["ancillaryContent"] {
    const uniqueAncillaries = new Map(
      ancillaries
        .flatMap((category) => category.ancillaryContent)
        .map((ancillary) => [ancillary.id, ancillary])
    )
    return [...uniqueAncillaries.values()]
  }

  const allAncillaries = mergeAncillaries(ancillaries)

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <Title as="h5">{intl.formatMessage({ id: "Upgrade your stay" })}</Title>
        <div className={styles.modal}>
          <Modal
            trigger={
              <Button theme="base" variant="icon" intent="text" size="small">
                {intl.formatMessage({ id: "View all" })}
                <ChevronRightSmallIcon
                  width={20}
                  height={20}
                  color="baseButtonTextOnFillNormal"
                />
              </Button>
            }
            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)}
                  >
                    <Caption
                      color={
                        category.categoryName === selectedCategory
                          ? "pale"
                          : "baseTextHighContrast"
                      }
                    >
                      {category.categoryName}
                    </Caption>
                  </button>
                ))}
              </div>

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

      <div className={styles.ancillaries}>
        {allAncillaries.slice(0, 4).map(({ description, ...ancillary }) => (
          <AncillaryCard key={ancillary.id} ancillary={ancillary} />
        ))}
      </div>
      <div className={styles.mobileAncillaries}>
        <Carousel>
          <Carousel.Content className={styles.carouselContainer}>
            {allAncillaries.map(({ description, ...ancillary }) => (
              <Carousel.Item key={ancillary.id}>
                <AncillaryCard key={ancillary.id} ancillary={ancillary} />
              </Carousel.Item>
            ))}
          </Carousel.Content>
          <Carousel.Previous className={styles.navigationButton} />
          <Carousel.Next className={styles.navigationButton} />
          <Carousel.Dots />
        </Carousel>
      </div>
    </div>
  )
}