import {FC} from 'react';
import GroupItem from './Item';
import {Row} from 'antd';
import {AreaChart, Area, ResponsiveContainer} from 'recharts';
import {useMockAnimate} from './hooks';
import css from './index.module.css';

const areaData = [
  {
    name: 'Page A',
    value: 4000,
  },
  {
    name: 'Page B',
    value: 3000,
  },
  {
    name: 'Page C',
    value: 2000,
  },
  {
    name: 'Page D',
    value: 2780,
  },
];

const lineData = [
  {
    name: 'Page A',
    value: 4000,
  },
  {
    name: 'Page B',
    value: 3000,
  },
  {
    name: 'Page C',
    value: 2000,
  },
  {
    name: 'Page D',
    value: 2780,
  },
  {
    name: 'Page e',
    value: 2280,
  },
  {
    name: 'Page f',
    value: 2280,
  },
];

const line2Data = [
  {
    name: 'Page A',
    value: 2000,
  },
  {
    name: 'Page B',
    value: 2300,
  },
  {
    name: 'Page C',
    value: 2200,
  },
  {
    name: 'Page D',
    value: 4780,
  },
  {
    name: 'Page e',
    value: 1280,
  },
  {
    name: 'Page f',
    value: 1280,
  },
];

const Group: FC = function () {
  const processWidth = useMockAnimate();

  return (
    <Row gutter={12}>
      <GroupItem title='今日预计到货数量(单)' content='20'>
        <ResponsiveContainer>
          <AreaChart data={areaData}>
            <Area
              type='monotone'
              dataKey='value'
              stroke='#00a6ca'
              fill='#E0F6FD'
            />
          </AreaChart>
        </ResponsiveContainer>
      </GroupItem>
      <GroupItem title='今日到货率' content='50%'>
        <div className={css.process}>
          <span
            className={css.processInner}
            style={{width: `${processWidth}%`}}
          />
        </div>
      </GroupItem>
      <GroupItem title='原料入库数量(台)' content='2000'>
        <ResponsiveContainer>
          <AreaChart data={lineData}>
            <Area
              type='monotone'
              dataKey='value'
              stroke='#82ca9d'
              fill='#E8F5ED'
            />
          </AreaChart>
        </ResponsiveContainer>
      </GroupItem>
      <GroupItem title='原料出库数量(台)' content='100'>
        <ResponsiveContainer>
          <AreaChart data={line2Data}>
            <Area
              type='monotone'
              dataKey='value'
              stroke='#6395F9'
              fill='#E6F2FF'
            />
          </AreaChart>
        </ResponsiveContainer>
      </GroupItem>
    </Row>
  );
};

export default Group;
