"use client"

import { keepPreviousData } from "@tanstack/react-query"
import { useState } from "react"

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

import { ChevronRightIcon } from "@/components/Icons"
import LoadingSpinner from "@/components/LoadingSpinner"

import DesktopTable from "./Desktop"
import MobileTable from "./Mobile"

import styles from "../earnAndBurn.module.css"

import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"

function PaginationButton({
  children,
  isActive,
  handleClick,
  disabled,
}: React.PropsWithChildren<{
  disabled: boolean
  isActive?: boolean
  handleClick: () => void
}>) {
  return (
    <button
      type={"button"}
      disabled={disabled}
      onClick={handleClick}
      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
    >
      {children}
    </button>
  )
}

function Pagination({
  pageCount,
  isFetching,
  handlePageChange,
  currentPage,
}: {
  pageCount: number
  isFetching: boolean
  handlePageChange: (page: number) => void
  currentPage: number
}) {
  const isOnFirstPage = currentPage === 1
  const isOnLastPage = currentPage === pageCount
  return (
    <div className={styles.pagination}>
      <PaginationButton
        disabled={isFetching || isOnFirstPage}
        handleClick={() => {
          handlePageChange(currentPage - 1)
        }}
      >
        <ChevronRightIcon className={styles.chevronLeft} />
      </PaginationButton>
      {[...Array(pageCount)].map((_, idx) => (
        <PaginationButton
          isActive={currentPage === idx + 1}
          disabled={isFetching || currentPage === idx + 1}
          key={idx}
          handleClick={() => {
            handlePageChange(idx + 1)
          }}
        >
          {idx + 1}
        </PaginationButton>
      ))}
      <PaginationButton
        disabled={isFetching || isOnLastPage}
        handleClick={() => {
          handlePageChange(currentPage + 1)
        }}
      >
        <ChevronRightIcon />
      </PaginationButton>
    </div>
  )
}

export default function TransactionTable({
  initialJourneyTransactions,
}: {
  initialJourneyTransactions: {
    data: { transactions: Transactions }
    meta: { totalPages: number }
  }
}) {
  const limit = 5
  const [page, setPage] = useState(1)
  const { data, isFetching, isLoading } =
    trpc.user.transaction.friendTransactions.useQuery(
      {
        limit,
        page,
      },
      {
        // TODO: fix the initial data issues on page load
        // initialData: initialJourneyTransactions,
        placeholderData: keepPreviousData,
      }
    )

  return isLoading ? (
    <LoadingSpinner />
  ) : (
    <>
      <MobileTable transactions={data?.data.transactions || []} />
      <DesktopTable transactions={data?.data.transactions || []} />
      {data && data.meta.totalPages > 1 ? (
        <Pagination
          handlePageChange={setPage}
          pageCount={data.meta.totalPages}
          isFetching={isFetching}
          currentPage={page}
        />
      ) : null}
    </>
  )
}