"use client"

import { _ } from "@/lib/translation"
import { trpc } from "@/lib/trpc/client"

import LoadingSpinner from "@/components/LoadingSpinner"
import CardGrid from "@/components/TempDesignSystem/CardGrid"

import Header from "../../Header"
import Container from "../Container"
import ListContainer from "../ListContainer"
import ShowMoreButton from "../ShowMoreButton"
import StayCard from "../StayCard"
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
import type { Page } from "@/types/components/myPages/stays/page"

export default function UpcomingStays({
  lang,
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const { data, hasNextPage, isFetching, fetchNextPage, isLoading } =
    trpc.user.stays.upcoming.useInfiniteQuery(
      { limit: 6 },
      {
        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
      }
    )

  function loadMoreData() {
    if (hasNextPage) {
      fetchNextPage()
    }
  }

  const stays = data?.pages.flatMap((page) => page.data) ?? []

  return (
    <Container>
      <Header title={title} subtitle={subtitle} link={link} />
      {isLoading ? (
        <LoadingSpinner />
      ) : stays.length ? (
        <ListContainer>
          <CardGrid>
            {stays.map((stay) => (
              <StayCard
                key={stay.attributes.confirmationNumber}
                lang={lang}
                stay={stay}
              />
            ))}
          </CardGrid>
          {hasNextPage ? (
            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
          ) : null}
        </ListContainer>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </Container>
  )
}