"use client"

import { dt } from "@/lib/dt"
import { _ } from "@/lib/translation"
import { trpc } from "@/lib/trpc/client"

import Button from "@/components/TempDesignSystem/Button"

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

import {
  EarnAndBurnProps,
  Page,
  RowProps,
} from "@/types/components/myPages/myPage/earnAndBurn"

const tableHeadings = [
  _("Arrival date"),
  _("Description"),
  _("Booking number"),
  _("Transaction date"),
  _("Points"),
]

function EarnAndBurn({ lang }: EarnAndBurnProps) {
  const { data, hasNextPage, isFetching, fetchNextPage } =
    trpc.user.transaction.friendTransactions.useInfiniteQuery(
      { limit: 5 },
      {
        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
      }
    )

  function loadMoreData() {
    if (hasNextPage) {
      fetchNextPage()
    }
  }

  const transactions = data?.pages.flatMap((page) => page.data) ?? []
  return transactions.length ? (
    <div className={styles.container}>
      <table className={styles.table}>
        <thead className={styles.thead}>
          <tr>
            {tableHeadings.map((heading) => (
              <th key={heading} className={styles.th}>
                {heading}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {transactions.map((transaction) => (
            <Row
              lang={lang}
              key={transaction.confirmationNumber}
              transaction={transaction}
            />
          ))}
        </tbody>
      </table>
      {/* TODO: add once pagination is available through API */}
      {/* <Button
        disabled={isFetching}
        intent="primary"
        bgcolor="white"
        type="button"
        onClick={loadMoreData}
      >
        {_("See more transactions")}
      </Button> */}
    </div>
  ) : (
    <div>
      <table className={styles.table}>
        <thead className={styles.thead}>
          <tr>
            {tableHeadings.map((heading) => (
              <th key={heading} className={styles.th}>
                {heading}
              </th>
            ))}
          </tr>
        </thead>
      </table>
      <div className={styles.emptyPlaceholder}>
        {_("No transactions available")}
      </div>
    </div>
  )
}

function Row({ transaction, lang }: RowProps) {
  const description =
    transaction.hotelName && transaction.city
      ? `${_(transaction.hotelName)}, ${transaction.city} ${transaction.nights} ${_("nights")}`
      : `${transaction.nights} ${_("nights")}`
  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
  const departure = dt(transaction.checkoutDate)
    .locale(lang)
    .format("DD MMM YYYY")
  const values = [
    arrival,
    description,
    transaction.confirmationNumber,
    departure,
    transaction.awardPoints,
  ]
  return (
    <tr className={styles.tr}>
      {values.map((value, idx) => (
        <td key={`value-${idx}`} className={styles.td}>
          {value}
        </td>
      ))}
    </tr>
  )
}

export default EarnAndBurn