import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Table, Space, Button, notification } from 'antd';
import { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { Link } from 'umi';

interface TestPlan {
  key: number;
  id: number;
  name: string;
  params: string;
  question520: string;
  spider: string;
  wikisql: string;
}

function handleRunPlan(recordID: number) {
  console.log('handleRunPlan', recordID);
}

const columns: ColumnsType<TestPlan> = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: 'Test Run',
    dataIndex: 'name',
    render: (text, record) => (
      <Link to={{ pathname: '/test_run', query: { run_id: record.id } }}>
        {text}
      </Link>
    ),
  },
  {
    title: 'Summary',
    dataIndex: 'summary',
    render: (text, record) => JSON.stringify(record.params),
  },
  {
    title: '520 Test',
    dataIndex: 'question520',
    render: (text, record) => (Number(text) * 100).toFixed(2) + '%',
  },
  {
    title: 'WikiSQL',
    dataIndex: 'wikisql',
    render: (text, record) => (Number(text) * 100).toFixed(2) + '%',
  },
  {
    title: 'Spider',
    dataIndex: 'spider',
    render: (text, record) => (Number(text) * 100).toFixed(2) + '%',
  },
];

export default () => {
  const [tableData, setTableData] = useState<TestPlan[]>([]);

  function openRequestErrorNotification(url: string, statusText: string) {
    notification.error({
      message: 'Error',
      description: 'fetch ' + url + ' got ' + statusText,
    });
  }

  function openBackendNotification(error: Error) {
    notification.error({
      message: 'Error',
      description: error,
    });
  }

  useEffect(() => {
    fetch('/api/v1/stats?plan_ids=1,3,30001')
      .then((res) => {
        if (res.status != 200) {
          res.json().then(
            (result) => {
              openBackendNotification(result.error);
            },
            (error) => {
              openRequestErrorNotification(res.url, res.statusText);
            },
          );
          throw new Error('Request Error');
        }
        return res.json();
      })
      .then(
        (result) => {
          let data: TestPlan[] = [];
          for (const i of result.result.runs) {
            data.push({
              key: i.run.ID,
              id: i.run.ID,
              name: i.run.name,
              params: i.run.params,
              question520: 0,
              wikisql: 0,
              spider: 0,
              // question520: i.reports[0].pass_rate,
              // wikisql: i.reports[1].pass_rate,
              // spider: i.reports[2].pass_rate,
            });
          }

          setTableData(data);
        },
        (error) => {
          console.log(error);
        },
      );
  }, []);

  return (
    <PageContainer>
      <ProCard ghost gutter={8}>
        <ProCard
          style={{ minHeight: '90vh', height: '100px', overflowY: 'scroll' }}
          colSpan={24}
          bordered
        >
          <Table
            pagination={{ defaultPageSize: 20 }}
            columns={columns}
            dataSource={tableData}
          />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};