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

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

import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
import AncillaryFlowModalWrapper from "./AddAncillaryFlow/AncillaryFlowModalWrapper"
import WrappedAncillaryCard from "./AddAncillaryFlow/WrappedAncillaryCard"
import { AddedAncillaries } from "./AddedAncillaries"
import ViewAllAncillaries from "./ViewAllAncillaries"

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

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

export function Ancillaries({
  ancillaries,
  booking,
  user,
  savedCreditCards,
  refId,
}: AncillariesProps) {
  const intl = useIntl()

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

  function filterPoints(ancillaries: Ancillaries) {
    return ancillaries.map((ancillary) => {
      return {
        ...ancillary,
        ancillaryContent: ancillary.ancillaryContent.map(
          ({ points, ...ancillary }) => ({
            ...ancillary,
            points: user ? points : undefined,
          })
        ),
      }
    })
  }

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

  return (
    <AddAncillaryProvider booking={booking} ancillaries={allAncillaries}>
      <div className={styles.container}>
        <div className={styles.title}>
          <Title as="h5">
            {intl.formatMessage({ id: "Upgrade your stay" })}
          </Title>
          <ViewAllAncillaries />
        </div>

        <div className={styles.ancillaries}>
          {uniqueAncillaries.slice(0, 4).map((ancillary) => (
            <WrappedAncillaryCard ancillary={ancillary} key={ancillary.id} />
          ))}
        </div>

        <div className={styles.mobileAncillaries}>
          <Carousel>
            <Carousel.Content className={styles.carouselContainer}>
              {uniqueAncillaries.map((ancillary) => {
                return (
                  <Carousel.Item key={ancillary.id}>
                    <WrappedAncillaryCard ancillary={ancillary} />
                  </Carousel.Item>
                )
              })}
            </Carousel.Content>
            <Carousel.Previous className={styles.navigationButton} />
            <Carousel.Next className={styles.navigationButton} />
            <Carousel.Dots />
          </Carousel>
        </div>

        <AddedAncillaries booking={booking} ancillaries={uniqueAncillaries} />
        <AncillaryFlowModalWrapper>
          <AddAncillaryFlowModal
            user={user}
            booking={booking}
            refId={refId}
            savedCreditCards={savedCreditCards}
          />
        </AncillaryFlowModalWrapper>
      </div>
    </AddAncillaryProvider>
  )
}