/* eslint-disable @typescript-eslint/no-unused-vars */
import { useMemo } from "react";
import { extractNumber, formatTime } from "../../../utils";
import Table from "../../../lib/table/table";
import { IColumn } from "../../../lib/table/type";

export interface IGraysHistoriesViewProps {
  histories: Record<string, string>[];
}

export default function GraysHistoriesView({
  histories,
}: IGraysHistoriesViewProps) {
  type BidHistoryEntry = {
    row_id: number;
    Price: string;
    Quantity: number;
    WinningQuantity: number;
    UserShortAddress: string;
    UserInitials: string;
    OriginalDate: string;
  };

  const columns: IColumn<BidHistoryEntry>[] = [
    {
      title: "Bidding Details",
      key: "UserInitials",
      renderRow(row) {
        return (
          <span>{`${row["UserInitials"]} - ${row["UserShortAddress"]}`}</span>
        );
      },
    },
    {
      title: "Bid Time",
      key: "OriginalDate",
      renderRow(row) {
        return (
          <span>
            {formatTime(
              new Date(extractNumber(row["OriginalDate"]) || 0).toUTCString(),
              "HH:mm:ss DD/MM/YYYY"
            )}
          </span>
        );
      },
    },
    {
      title: "Bid Price",
      key: "Price",
    },
    {
      title: "Bid Qty",
      key: "Quantity",
    },
    {
      title: "Win Qty",
      key: "WinningQuantity",
    },
  ];

  return (
    <Table
      striped
      highlightOnHover
      withTableBorder
      withColumnBorders
      styleDefaultHead={{
        justifyContent: "flex-start",
        width: "fit-content",
      }}
      showFilter={false}
      showActions={false}
      showChooses={false}
      columns={columns}
      rowKey="row_id"
      rows={histories as unknown as BidHistoryEntry[]}
    />
  );
}