import { ProCard, StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import Page from "@/pages/Home/Chart";
import PieChart from "@/pages/Home/components/Pie";
const { Statistic } = StatisticCard;

import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns: ColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <ProCard
        title=""
        // extra="2019年9月28日 星期五"
        split={responsive ? 'horizontal' : 'vertical'}
        ghost={true}
      >
        <ProCard split="horizontal" ghost={true} gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}>
          <ProCard split="vertical" gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]} ghost={true}>
            <StatisticCard
              style={{ height: '100%' }}
              statistic={{
                title: '昨日全部流量',
                value: 234,
                description: (
                  <Statistic
                    title="月同比"
                    value="8.04%"
                    trend="down"
                  />
                ),
              }}
            />
            <StatisticCard
              style={{ height: '100%' }}
              statistic={{
                title: '本月累计流量',
                value: 234,
                description: (
                  <Statistic title="月同比" value="8.04%" trend="up" />
                ),
              }}
            />
            <StatisticCard
              style={{ height: '100%' }}
              statistic={{
                title: '运行中实验',
                value: '12/56',
                suffix: '个',
                description: (
                  <Statistic title="月同比" value="8.04%" trend="up" />
                ),
              }}
            />
            <StatisticCard
              style={{ height: '100%' }}
              statistic={{
                title: '历史实验总数',
                value: '134',
                suffix: '个',
                description: (
                  <Statistic title="月同比" value="8.04%" trend="up" />
                ),
              }}
            />
          </ProCard>
          <ProCard extra={'as'} split={responsive ? 'horizontal' : 'vertical'}>
            <StatisticCard
              title="流量走势"
              chart={
                <Page></Page>
              }
            />
            <StatisticCard
              title="流量走势"
              chart={
                <Page></Page>
              }
            />
          </ProCard>
          <ProCard split="vertical" gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]} ghost={true}>
            <ProCard split="horizontal" style={{ height: '100%' }}>
              <ProCard split="vertical">
                <StatisticCard
                  statistic={{
                    title: '昨日全部流量',
                    value: 234,
                    description: (
                      <Statistic
                        title="较本月平均流量"
                        value="8.04%"
                        trend="down"
                      />
                    ),
                  }}
                />
                <StatisticCard
                  statistic={{
                    title: '本月累计流量',
                    value: 234,
                    description: (
                      <Statistic title="月同比" value="8.04%" trend="up" />
                    ),
                  }}
                />
              </ProCard>
              <ProCard>
                <StatisticCard
                  chart={
                    <Table columns={columns} dataSource={data} />
                  }
                />
              </ProCard>
            </ProCard>
            <StatisticCard
              style={{ height: '100%' }}
              title="流量走势"
              chart={
                <PieChart></PieChart>
              }
            />
          </ProCard>
        </ProCard>
      </ProCard>
    </RcResizeObserver>
  );
};
