"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 AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"
import AncillaryFlowModalWrapper from "./AddAncillaryFlow/AncillaryFlowModalWrapper"
import AllAncillariesModal from "./AllAncillariesModal/input"
import { AddedAncillaries } from "./AddedAncillaries"
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)

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

  return (
    <AddAncillaryProvider booking={bookedRoom} ancillaries={ancillaries.all}>
      <div className={styles.container}>
        {ancillaries.unique.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.unique.slice(0, 4).map((ancillary) => (
                <WrappedAncillaryCard
                  ancillary={ancillary}
                  key={ancillary.id}
                />
              ))}
            </div>

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

        <AddedAncillaries
          booking={bookedRoom}
          ancillaries={ancillaries.unique}
        />

        <AncillaryFlowModalWrapper>
          <AddAncillaryFlowModal
            user={user}
            booking={bookedRoom}
            packages={packages}
            savedCreditCards={savedCreditCards}
          />
        </AncillaryFlowModalWrapper>
      </div>
    </AddAncillaryProvider>
  )
}
