"use client"

import { _ } from "@/lib/translation"
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 type { Page } from "@/types/components/myPages/myStays/page"
import type { LangParams } from "@/types/params"

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

  function loadMoreData() {
    fetchNextPage()
  }

  return (
    <Container>
      <Header
        title={_("Previous stays")}
        subtitle={_(
          "Revisit your stays and rekindle those our moments together, with ease."
        )}
      />
      {data?.pages.length ? (
        <ListContainer>
          <StayList
            lang={lang}
            stays={data?.pages.flatMap((page) => page.data) ?? []}
          />
          {hasNextPage ? (
            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
          ) : null}
        </ListContainer>
      ) : (
        <EmptyPreviousStaysBlock />
      )}
    </Container>
  )
}
