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

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

export default function PicklesHistoriesView({
  histories,
}: IGraysHistoriesViewProps) {
  // const rows = useMemo(() => {
  //   return histories.map((element, index) => (
  //     <Table.Tr key={index}>
  //       <Table.Td>{element["bidderAnonName"]}</Table.Td>
  //       <Table.Td>{element["actualBid"]}</Table.Td>
  //       <Table.Td>
  //         {formatTime(
  //           new Date(element["bidTimeInMilliSeconds"]).toUTCString(),
  //           "HH:mm:ss DD/MM/YYYY"
  //         )}
  //       </Table.Td>
  //     </Table.Tr>
  //   ));
  // }, [histories]);

  type BidHistoryEntry = {
    row_id: number;
    bidderAnonName: string;
    actualBid: number;
    bidTimeInMilliSeconds: number;
  };

  const columns: IColumn<BidHistoryEntry>[] = [
    {
      title: "Bidder name",
      key: "bidderAnonName",
    },
    {
      title: "Actual bid",
      key: "actualBid",
    },
    {
      title: "Time",
      key: "bidTimeInMilliSeconds",
      renderRow(row) {
        return (
          <span>
            {formatTime(
              new Date(row["bidTimeInMilliSeconds"]).toUTCString(),
              "HH:mm:ss DD/MM/YYYY"
            )}
          </span>
        );
      },
    },
  ];

  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[]}
    />
  );
}
