"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 EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"

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

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

  function loadMoreData() {
    if (hasNextPage) {
      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>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </Container>
  )
}
