import {Card} from 'antd';
import css from '../index.module.css';
import {FC} from 'react';
import {
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  AreaChart,
  Area,
} from 'recharts';
import classNames from 'classnames';
import {useFullscreen} from '../hooks';
import {useChartData} from './hoos';

const FinishChart: FC = function () {
  const ref = useFullscreen();
  const data = useChartData();

  return (
    <Card
      ref={ref}
      title='产成品出入库统计'
      className={classNames(css.card, css.flexCard)}
    >
      <ResponsiveContainer>
        <AreaChart data={data}>
          <XAxis dataKey='name' />
          <YAxis />
          <Legend
            formatter={function (name: string) {
              return name === 'value' ? '入库' : '出库';
            }}
          />
          <Tooltip
            contentStyle={{
              background: 'rgba(0,0,0,.4)',
              color: 'white !important',
              borderRadius: '12px',
              border: 'unset',
              padding: '12px 24px',
            }}
            formatter={function (value: string, name: string) {
              return [value, name === 'value' ? '入库' : '出库'];
            }}
          />
          <Area
            type='monotone'
            dataKey='value'
            stroke='#00a6ca'
            fill='#E1F6FC'
          />
          <Area
            type='monotone'
            dataKey='data'
            stroke='#82ca9d'
            fill='#E8F5ED'
          />
        </AreaChart>
      </ResponsiveContainer>
    </Card>
  );
};

export default FinishChart;
