import { PrettyNumber } from "@islands/utils/pretty_number.ts";
import SinglePanelLayout from "@infinity-beyond/ui/components/ui/layout/SinglePanelLayout.tsx";

import { LedgerRow } from "@ledger/ledger.ui/LedgerRow.tsx";
import { Pagination } from "@infinity-beyond/ui/components/ui/Pagination.tsx";
import type { I_Pagination } from "@infinity-beyond/modules/pagination.ts";

import { plural, singular } from "https://deno.land/x/deno_plural@2.0.0/mod.ts";

export interface I_LedgerRowConfig {
  show_button?: boolean
  show_icons?: boolean
  show_pagination?: boolean
}

export interface I_LedgerUser {
  user_key: string
  balance: number
  ledger: Ledger.Ledger<any>
  entries: Ledger.Entry[]
  total_entries: number
  row_config?: I_LedgerRowConfig
  meta: I_Pagination
}

export function LedgerUser({ user_key, balance, ledger, entries, total_entries, row_config, meta }: I_LedgerUser) {
  return (
    <SinglePanelLayout>
      <div class="p-8">
        <div className="text-4xl">Plays</div>
        <div className="text-lg">User: { user_key }</div>
        <h1>Plays for { user_key } - { balance }</h1>
      </div>
      <ul className="list bg-base-100 rounded-box shadow-md">
        <li className="p-4 pb-2 text-xs text-stone-400 z-1 tracking-wide sticky top-0 bg-base-100">Recent {singular(ledger.name).toLowerCase()} entries ({PrettyNumber(total_entries)})</li>
        { entries.map(entry => <LedgerRow ledger={ledger} entry={entry} key={entry.id} config={row_config} />) }
      </ul>

      { row_config?.show_pagination &&
        <Pagination meta={meta} entry_plural={plural(ledger.name).toLowerCase()} />
      }
    </SinglePanelLayout>
  )
}