web/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/index.tsx

"use client"

import { useState } from "react"

import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"

import { Carousel } from "@/components/Carousel"
import useLang from "@/hooks/useLang"

import { UpcomingStaysSidePeek } from "../SidePeek"
import CarouselCard from "./CarouselCard"
import { SeeAllCard } from "./SeeAllCard"

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

import type {
  UpcomingStaysClientProps,
  UpcomingStaysNonNullResponseObject,
} from "@/types/components/myPages/stays/upcoming"

const MAX_VISIBLE_STAYS = 5

export default function UpcomingStaysCarousel({
  initialUpcomingStays,
}: UpcomingStaysClientProps) {
  const lang = useLang()
  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)

  const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
    {
      limit: 6,
      lang,
    },
    {
      getNextPageParam: (lastPage) => {
        return lastPage?.nextCursor
      },
      initialData: {
        pageParams: [undefined, 1],
        pages: [initialUpcomingStays],
      },
    }
  )

  if (isLoading) {
    return <LoadingSpinner />
  }

  const stays = data.pages
    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
    .flatMap((page) => page.data)

  if (!stays.length) {
    return null
  }

  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
  const hasMoreStays = stays.length >= MAX_VISIBLE_STAYS

  return (
    <>
      <Carousel className={styles.carousel}>
        <Carousel.Content>
          {visibleStays.map((stay) => (
            <Carousel.Item
              key={stay.attributes.confirmationNumber}
              className={styles.carouselItem}
            >
              <CarouselCard stay={stay} />
            </Carousel.Item>
          ))}
          {hasMoreStays && (
            <Carousel.Item className={styles.carouselItem}>
              <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />
            </Carousel.Item>
          )}
        </Carousel.Content>
        <Carousel.Previous className={styles.navigationButton} />
        <Carousel.Next className={styles.navigationButton} />
        <Carousel.Dots />
      </Carousel>
      <UpcomingStaysSidePeek
        isOpen={isSidePeekOpen}
        onClose={() => setIsSidePeekOpen(false)}
      />
    </>
  )
}