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

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

  return (
    <Card
      title='原材料出入库统计'
      className={classNames(css.card, css.flexCard)}
      ref={ref}
    >
      <ResponsiveContainer>
        <BarChart 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' ? '入库' : '出库'];
            }}
            itemSorter={payload => (payload.name === 'value' ? 1 : -1)}
          />
          <Bar dataKey='value' fill='#00a6ca' />
          <Bar dataKey='data' fill='#FAC858' />
        </BarChart>
      </ResponsiveContainer>
    </Card>
  );
};

export default RawChart;
