import { Box } from '@mantine/core';
import { useMemo, useRef } from 'react';
import { getOutBidLogs } from '../apis/out-bid-log';
import Table from '../lib/table/table';
import { IColumn, TRefTableFn } from '../lib/table/type';
import { IOutBidLog } from '../system/type';
import { formatTime } from '../utils';

export default function OutBidsLog() {
    const refTableFn: TRefTableFn<IOutBidLog> = useRef({});

    const columns: IColumn<IOutBidLog>[] = [
        {
            key: 'id',
            title: 'ID',
            typeFilter: 'number',
        },
        {
            key: 'model',
            title: 'Model',
            typeFilter: 'text',
        },
        {
            key: 'lot_id',
            title: 'Lot ID',
            typeFilter: 'text',
        },
        {
            key: 'out_price',
            title: 'Out Price',
            typeFilter: 'number',
        },
        {
            key: 'raw_data',
            title: 'Raw data',
            typeFilter: 'text',
        },
        {
            key: 'created_at',
            title: 'Created at',
            typeFilter: 'none',
            renderRow(row) {
                return <span>{formatTime(row.created_at)}</span>;
            },
        },
        {
            key: 'updated_at',
            title: 'Update at',
            typeFilter: 'none',
            renderRow(row) {
                return <span>{formatTime(row.updated_at)}</span>;
            },
        },
    ];

    const table = useMemo(() => {
        return (
            <Table
                refTableFn={refTableFn}
                striped
                showLoading={true}
                highlightOnHover
                styleDefaultHead={{
                    justifyContent: 'flex-start',
                    width: 'fit-content',
                }}
                options={{
                    query: getOutBidLogs,
                    pathToData: 'data.data',
                    keyOptions: {
                        last_page: 'lastPage',
                        per_page: 'perPage',
                        from: 'from',
                        to: 'to',
                        total: 'total',
                    },
                }}
                rows={[]}
                withColumnBorders
                showChooses={true}
                withTableBorder
                columns={columns}
                rowKey="id"
            />
        );
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return <Box>{table}</Box>;
}
