/* eslint-disable @typescript-eslint/no-unused-vars */
import { LoadingOverlay, Modal, ModalProps, Table } from '@mantine/core';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { getDetailBidHistories } from '../../apis/bid-histories';
import { extractNumber } from '../../lib/table/ultils';
import { IBid } from '../../system/type';
import { formatTime } from '../../utils';

export interface IShowHistoriesBidGraysApiModalProps extends ModalProps {
    data: IBid | null;
    onUpdated?: () => void;
}

export default function ShowHistoriesBidGraysApiModal({ data, onUpdated, ...props }: IShowHistoriesBidGraysApiModalProps) {
    const [histories, setHistories] = useState<Record<string, string>[]>([]);

    const [loading, setLoading] = useState(false);

    const rows = useMemo(() => {
        return histories.map((element) => (
            <Table.Tr key={element.LotId}>
                <Table.Td>{`${element['UserInitials']} - ${element['UserShortAddress']}`}</Table.Td>
                <Table.Td>{formatTime(new Date(extractNumber(element['OriginalDate']) || 0).toUTCString(), 'HH:mm:ss DD/MM/YYYY')}</Table.Td>
                <Table.Td>{`AU $${element['Price']}`}</Table.Td>
                <Table.Td>{`${element['Quantity']}`}</Table.Td>
                <Table.Td>{`${element['WinningQuantity']}`}</Table.Td>
            </Table.Tr>
        ));
    }, [histories]);

    const handleCallApi = useCallback(async () => {
        if (!data?.lot_id) {
            setHistories([]);

            return;
        }

        setLoading(true);
        const response = await getDetailBidHistories(data?.lot_id);
        setLoading(false);

        if (response.data && response.data) {
            setHistories(response.data);
        }
    }, [data]);

    useEffect(() => {
        handleCallApi();
    }, [handleCallApi]);

    return (
        <Modal className="relative" {...props} size="xl" title={<span className="text-xl font-bold">BIDDING HISTORY</span>} centered>
            <Table striped highlightOnHover withTableBorder withColumnBorders>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>Bidding Details</Table.Th>
                        <Table.Th>Bid Time</Table.Th>
                        <Table.Th>Bid Price</Table.Th>
                        <Table.Th>Bid Qty</Table.Th>
                        <Table.Th>Win Qty</Table.Th>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {histories.length <= 0 ? (
                        <Table.Tr>
                            <Table.Td colSpan={5} className="text-center">
                                None
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        rows
                    )}
                </Table.Tbody>
            </Table>

            <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ blur: 2 }} />
        </Modal>
    );
}