import type { TinyRingConfig } from '@ant-design/charts';
import { Tiny } from '@ant-design/charts';
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import { Card, Statistic } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';

const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
  const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
  const config: TinyRingConfig = {
    percent: percent / 100,
    width: 120,
    height: 120,
    color: ['#E8EFF5', frontColor],
    annotations: [
      {
        type: 'text',
        style: {
          text: `${percent}%`,
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 16,
          fontStyle: 'bold',
        },
      },
    ],
  };

  return <TinyRing {...config} />;
};

interface IndexData {
  todayPT: number;
  report: number;
  oreo: number;
  totalPT: number;
  allSuccess: number;
  all: number;
}

const indexData: IndexData = {
  todayPT: 14,
  report: 8,
  oreo: 93,
  totalPT: 1145,
  allSuccess: 1818,
  all: 1919,
};

const Logs: React.FC = () => {
  const [responsive, setResponsive] = useState(false);
  return (
    <PageContainer>
      <Card style={{ color: '#f5f5f5' }}>
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <ProCard split={responsive ? 'horizontal' : 'vertical'}>
            <ProCard colSpan="45%">
              <ProCard hoverable>左侧内容</ProCard>
            </ProCard>
            <ProCard colSpan="20%">
              <StatisticCard
                hoverable
                style={{ marginTop: '0vh' }}
                statistic={{
                  title: '今日预填写工单数',
                  value: indexData.todayPT,
                  description: (
                    <Statistic
                      style={{ marginTop: '15vh', marginBottom: '8vh' }}
                      title="今日反馈数"
                      value={indexData.report}
                    />
                  ),
                }}
              />
            </ProCard>
            <ProCard>
              <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
                <StatisticCard
                  hoverable
                  chart={percentRing(
                    Math.round(((indexData.oreo / indexData.totalPT) * 1000) / 10),
                    '#00CC66',
                  )}
                  statistic={{
                    title: '加入 Oreo 工单数',
                    value: indexData.oreo,
                    description: <Statistic title="预填写工单总数" value={indexData.totalPT} />,
                  }}
                  chartPlacement="left"
                />
                <StatisticCard
                  hoverable
                  style={{ marginTop: '3vh' }}
                  chart={percentRing(
                    Math.round((indexData.allSuccess / indexData.all) * 1000) / 10,
                    '#66AFF4',
                  )}
                  statistic={{
                    title: '维修成功次数',
                    value: indexData.allSuccess,
                    description: <Statistic title="Oreo、ETA 总工单数" value={indexData.all} />,
                  }}
                  chartPlacement="left"
                />
              </StatisticCard.Group>
            </ProCard>
          </ProCard>
        </RcResizeObserver>
      </Card>
    </PageContainer>
  );
};
export default Logs;