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

interface TestCase {
  key: number;
  id: number;
  question: string;
  pass_rate: number;
  database: string;
}

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

const columns: ColumnsType<TestCase> = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: 'Question',
    dataIndex: 'question',
  },
  {
    title: 'PassRate',
    dataIndex: 'pass_rate',
    render: (text, record) => <p>{(Number(text) * 100).toFixed(2)} %</p>,
  },
  {
    title: 'Database',
    dataIndex: 'database',
  },
];

export default () => {
  const [tableData, setTableData] = useState<TestCase[]>([]);
  const location: any = useLocation();
  let plan_id = location.query.plan_id;
  const [pagination, setPagination] = useState({
    pageSize: 20,
    current: 1,
    total: 100,
    onChange: onChange,
  });

  async function onChange(page, pageSize) {
    pagination.pageSize = pageSize;
    pagination.current = page;
    setPagination(pagination);
    loadData();
  }

  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,
    });
  }

  function loadData() {
    fetch(
      `/api/v1/plan/${plan_id}/cases?page=${pagination.current}&per_page=${pagination.pageSize}`,
    )
      .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: TestCase[] = [];
          for (const i of result.result.cases) {
            data.push({
              key: i.case.ID,
              id: i.case.ID,
              question: i.case.question,
              pass_rate: i.pass_rate,
              database: i.case.database,
            });
          }

          pagination.total = result.result.total;
          console.log('set pagination', pagination);
          setPagination(pagination);
          setTableData(data);
        },
        (error) => {
          console.log(error);
        },
      );
  }

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

  return (
    <PageContainer>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/test_plan">Test Plan</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/test_plan">Test Plan {plan_id}</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>Test Cases</Breadcrumb.Item>
        </Breadcrumb>
        <ProCard ghost gutter={8}>
          <ProCard
            style={{ minHeight: '90vh', height: '100px', overflowY: 'scroll' }}
            colSpan={24}
            bordered
          >
            <Table
              pagination={pagination}
              columns={columns}
              dataSource={tableData}
            />
          </ProCard>
        </ProCard>
      </Space>
    </PageContainer>
  );
};