"use client"

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

import Container from "../Container"
import Header from "../Header"
import ListContainer from "../ListContainer"
import ShowMoreButton from "../ShowMoreButton"
import StayList from "../StayList"
import EmptyPreviousStaysBlock from "./EmptyPreviousStays"

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

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

  function loadMoreData() {
    fetchNextPage()
  }

  return (
    <Container>
      <Header title={title} subtitle={subtitle} link={link} />

      {data?.pages.length ? (
        <ListContainer>
          <StayList
            lang={lang}
            stays={data?.pages.flatMap((page) => page.data) ?? []}
          />
          {hasNextPage ? (
            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
          ) : null}
        </ListContainer>
      ) : (
        <EmptyPreviousStaysBlock />
      )}
    </Container>
  )
}
