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

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

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

import { Carousel } from "@/components/Carousel"
import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
import Title from "@/components/TempDesignSystem/Text/Title"

import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
import AncillaryGridModal from "./AncillaryGridModal"

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

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

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

  const { setSelectedAncillary, setConfirmationNumber, setOpenedFrom } =
    useAddAncillaryStore()
  const [isModalOpen, setModalOpen] = useState(false)

  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)

  const handleCardClick = (
    ancillary: Ancillary["ancillaryContent"][number]
  ) => {
    if (booking?.confirmationNumber) {
      setConfirmationNumber(booking.confirmationNumber)
    }
    setSelectedAncillary(ancillary)
    setOpenedFrom("list")
    setModalOpen(true)
  }

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <Title as="h5">{intl.formatMessage({ id: "Upgrade your stay" })}</Title>
        <AncillaryGridModal
          ancillaries={ancillaries}
          selectedCategory={selectedCategory}
          setSelectedCategory={setSelectedCategory}
          handleCardClick={handleCardClick}
        />
      </div>

      <div className={styles.ancillaries}>
        {allAncillaries
          .slice(0, 4)
          .map(({ description, points, ...ancillary }) => {
            const ancillaryData = !!user ? { points, ...ancillary } : ancillary

            return (
              <div
                key={ancillary.id}
                onClick={() =>
                  handleCardClick({ description, points, ...ancillary })
                }
              >
                <AncillaryCard key={ancillary.id} ancillary={ancillaryData} />
              </div>
            )
          })}
      </div>

      <div className={styles.mobileAncillaries}>
        <Carousel>
          <Carousel.Content className={styles.carouselContainer}>
            {allAncillaries.map(({ description, points, ...ancillary }) => {
              const ancillaryData = !!user
                ? { points, ...ancillary }
                : ancillary
              return (
                <Carousel.Item
                  key={ancillary.id}
                  onClick={() =>
                    handleCardClick({ description, points, ...ancillary })
                  }
                >
                  <AncillaryCard key={ancillary.id} ancillary={ancillaryData} />
                </Carousel.Item>
              )
            })}
          </Carousel.Content>
          <Carousel.Previous className={styles.navigationButton} />
          <Carousel.Next className={styles.navigationButton} />
          <Carousel.Dots />
        </Carousel>
      </div>

      <AddAncillaryFlowModal
        user={user}
        isOpen={isModalOpen}
        onClose={() => setModalOpen(false)}
        booking={booking}
      />
    </div>
  )
}