"use client"

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

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

import ListContainer from "../ListContainer"
import ShowMoreButton from "../ShowMoreButton"
import StayCard from "../StayCard"

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

export default function ClientUpcomingStays({
  initialUpcomingStays,
}: UpcomingStaysClientProps) {
  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
    trpc.user.stays.upcoming.useInfiniteQuery(
      {
        limit: 6,
      },
      {
        getNextPageParam: (lastPage) => {
          return lastPage?.nextCursor
        },
        initialData: {
          pageParams: [undefined, 1],
          pages: [initialUpcomingStays],
        },
      }
    )

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

  // TS having a hard time with the filtered type.
  // This is only temporary as we will not return null
  // later on when we handle errors appropriately.
  const filteredStays = (data?.pages.filter((page) => page && page.data) ??
    []) as unknown as UpcomingStaysNonNullResponseObject[]
  const stays = filteredStays.flatMap((page) => page.data)

  return isLoading ? (
    <LoadingSpinner />
  ) : stays.length ? (
    <ListContainer>
      <Grids.Stackable>
        {stays.map((stay) => (
          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
        ))}
      </Grids.Stackable>
      {hasNextPage ? (
        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
      ) : null}
    </ListContainer>
  ) : null
}