"use client"

import { useEffect, useState } from "react"

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

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

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
      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() {
  const limit = 5
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(0)
  const [currentTransactions, setCurrentTransactions] = useState<Transactions>(
    []
  )
  const { data, isFetching, isLoading } =
    trpc.user.transaction.friendTransactions.useQuery({
      limit,
      page,
    })
  // Should the active page be mirroried in the URL with params?
  // That way the actual fetch could be moved up and Mobile/Desktop can be strictly server side
  useEffect(() => {
    if (typeof data?.data.pages === "number") {
      setTotalPages(data?.data.pages)
    }
  }, [data?.data.pages])

  useEffect(() => {
    if (data?.data.transactions) {
      setCurrentTransactions(data.data.transactions)
    }
  }, [data?.data.transactions])

  return !currentTransactions.length ? (
    "Loading..." // Add loading state table
  ) : (
    <>
      <MobileTable transactions={currentTransactions} />
      <DesktopTable transactions={currentTransactions} />
      {totalPages > 1 ? (
        <Pagination
          handlePageChange={setPage}
          pageCount={totalPages}
          isFetching={isFetching}
          currentPage={page}
        />
      ) : null}
    </>
  )
}