import type { TableColumnsType } from 'antd';
import { Button, Table } from 'antd';
import { ReportDetail } from 'models';
import { useReportList } from 'queries/report';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const ReportTable: React.FC = () => {
  const { isLoading, data: reportData } = useReportList({
    page_size: 100,
  });
  const report_data: any = reportData;
  const navigate = useNavigate();

  const [pagination, setPagination] = useState(() => ({
    page: reportData?.page.total_pages || 1,
    page_size: 10,
  }));

  const columns: TableColumnsType<ReportDetail> = [
    {
      title: 'ID',
      dataIndex: 'ID',
      key: 'ID',
      sorter: (a, b) => a.ID - b.ID,
    },
    {
      title: 'Created Date',
      dataIndex: 'Created Date',
      key: 'Created Date',
    },
    {
      title: 'No. Requests',
      dataIndex: 'No. Requests',
      key: 'No. Requests',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: 'Purchase Date Acc',
      dataIndex: 'Purchase Date Acc',
      key: 'Purchase Date Acc',
      render: (_, record) => {
        return (
          record['Purchase Date Acc'] &&
          Number(record['Purchase Date Acc']).toFixed(2)
        );
      },
    },

    {
      title: 'Retailer Acc',
      dataIndex: 'Retailer Acc',
      key: 'Retailer Acc',
      render: (_, record) => {
        return (
          record['Retailer Acc'] && Number(record['Retailer Acc']).toFixed(2)
        );
      },
    },
    {
      title: 'IMEI Acc',
      dataIndex: 'IMEI Acc',
      key: 'IMEI Acc',
      render: (_, record) => {
        return record['IMEI Acc'] && Number(record['IMEI Acc']).toFixed(2);
      },
    },
    {
      title: 'Avg Accuracy',
      dataIndex: 'Avg Accuracy',
      key: 'Avg Accuracy',
      render: (_, record) => {
        return (
          record['Avg Accuracy'] && Number(record['Avg Accuracy']).toFixed(2)
        );
      },
    },
    {
      title: 'Avg Client Request Time',
      dataIndex: 'Avg. Client Request Time',
      key: 'Avg. Client Request Time',
      render: (_, record) => {
        return (
          record['Avg Client Request Time'] &&
          Number(record['Avg Client Request Time']).toFixed(2)
        );
      },
    },
    {
      title: 'Avg. OCR Processing Time',
      dataIndex: 'Avg. OCR Processing Time',
      key: 'Avg. OCR Processing Time',
      render: (_, record) => {
        return (
          record['Avg. OCR Processing Time'] &&
          Number(record['Avg. OCR Processing Time']).toFixed(2)
        );
      },
    },
    {
      title: 'Actions',
      dataIndex: 'actions',
      key: 'actions',
      width: 200,
      render: (_, record) => {
        return (
          <div style={{ flexDirection: 'row' }}>
            <Button
              onClick={() => {
                navigate(`/reports/${record.report_id}/detail`);
              }}
              style={{ marginRight: 10 }}
            >
              Detail
            </Button>
            <Button>Download</Button>
          </div>
        );
      },
    },
  ];

  return (
    <>
      <Table
        loading={isLoading}
        columns={columns}
        dataSource={(report_data && report_data?.report_detail) || []}
        bordered
        size='small'
        pagination={{
          current: pagination.page,
          pageSize: pagination.page_size,
          total: report_data?.count || 0,
          onChange: (page, pageSize) => {
            setPagination({ page, page_size: pageSize || 10 });
          },
          showSizeChanger: false,
        }}
      />
    </>
  );
};

export default ReportTable;