"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() {
    if (hasNextPage) {
      fetchNextPage()
    }
  }

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

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

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