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

import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

import { Carousel } from "@/components/Carousel"
import { useAncillaries } from "@/hooks/useAncillaries"
import { AddAncillaryProvider } from "@/providers/AddAncillaryProvider"

import AddAncillaryFlow from "./AddAncillaryFlow"
import { AddedAncillaries } from "./AddedAncillaries"
import AllAncillariesModal from "./AllAncillariesModal"
import WrappedAncillaryCard from "./Card"

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

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

export function Ancillaries({
  ancillariesPromise,
  packages,
  savedCreditCards,
  user,
}: AncillariesProps) {
  const intl = useIntl()
  const bookedRoom = useMyStayStore((state) => state.bookedRoom)

  const ancillaries = useAncillaries(
    ancillariesPromise,
    packages,
    user,
    bookedRoom.ancillaries.map((a) => a.code)
  )

  if (!ancillaries || !bookedRoom) {
    return null
  }

  return (
    <AddAncillaryProvider
      booking={bookedRoom}
      ancillaries={ancillaries.availableByCategory}
    >
      <div className={styles.container}>
        {ancillaries.availableUnique.length > 0 &&
          bookedRoom.canModifyAncillaries && (
            <>
              <div className={styles.title}>
                <Typography variant="Title/Subtitle/lg">
                  <h2>
                    {intl.formatMessage({
                      id: "ancillaries.upgradeYourStay",
                      defaultMessage: "Upgrade your stay",
                    })}
                  </h2>
                </Typography>
                <div className={styles.viewAllLink}>
                  <AllAncillariesModal />
                </div>
              </div>

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

              <div className={styles.mobileAncillaries}>
                <Carousel>
                  <Carousel.Content>
                    {ancillaries.availableUnique.map((ancillary) => {
                      return (
                        <Carousel.Item key={ancillary.id}>
                          <WrappedAncillaryCard ancillary={ancillary} />
                        </Carousel.Item>
                      )
                    })}
                  </Carousel.Content>
                  <Carousel.Dots />
                </Carousel>
              </div>
            </>
          )}

        <AddedAncillaries
          booking={bookedRoom}
          ancillaries={ancillaries.allUnique}
        />
        <AddAncillaryFlow
          user={user}
          booking={bookedRoom}
          packages={packages}
          savedCreditCards={savedCreditCards}
        />
      </div>
    </AddAncillaryProvider>
  )
}