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';

const data = [
  {
    name: '03-06',
    value: 590,
    data: 100,
  },
  {
    name: '03-07',
    value: 868,
    data: 200,
  },
  {
    name: '03-08',
    value: 1397,
    data: 500,
  },
  {
    name: '03-09',
    value: 1480,
    data: 700,
  },
  {
    name: '03-10',
    value: 1520,
    data: 300,
  },
  {
    name: '03-11',
    value: 1400,
    data: 100,
  },
  {
    name: '03-12',
    value: 1200,
    data: 0,
  },
  {
    name: '03-13',
    value: 100,
    data: 1200,
  },
  {
    name: '03-14',
    value: 1200,
    data: 1200,
  },
  {
    name: '03-15',
    value: 500,
    data: 800,
  },
  {
    name: '03-16',
    value: 1000,
    data: 1200,
  },
];

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

  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
            labelClassName='123'
            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;
