/* eslint-disable @typescript-eslint/no-unused-vars */
import { Modal, ModalProps, Table } from '@mantine/core';
import { IBid } from '../../system/type';
import { formatTime } from '../../utils';

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

export default function ShowHistoriesModal({ data, onUpdated, ...props }: IShowHistoriesModalModalProps) {
    const rows = data?.histories.map((element) => (
        <Table.Tr key={element.id}>
            <Table.Td>{element.id}</Table.Td>
            <Table.Td>{element.price}</Table.Td>
            <Table.Td>{formatTime(new Date(element.created_at).toUTCString(), 'HH:mm:ss DD/MM/YYYY')}</Table.Td>
        </Table.Tr>
    ));

    return (
        <Modal {...props} size="xl" title={<span className="text-xl font-bold">Histories</span>} centered>
            <Table striped highlightOnHover withTableBorder withColumnBorders>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>ID</Table.Th>
                        <Table.Th>Price</Table.Th>
                        <Table.Th>Created at</Table.Th>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {data && data.histories.length <= 0 ? (
                        <Table.Tr>
                            <Table.Td colSpan={3} className="text-center">
                                None
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        rows
                    )}
                </Table.Tbody>
            </Table>
        </Modal>
    );
}
