"use client"

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

import Grids from "@/components/TempDesignSystem/Grids"
import useLang from "@/hooks/useLang"

import ListContainer from "../ListContainer"
import OldStayCard from "../OldStayCard"

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

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

  if (isLoading) {
    return <LoadingSpinner />
  }

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

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

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