import css from './index.module.css';
import {FC} from 'react';
import goodsIcon from '@assets/images/screen/shop.webp';
import pieIcon from '@assets/images/screen/pie.webp';
import {
  BarChart,
  XAxis,
  YAxis,
  Bar,
  Cell,
  CartesianGrid,
  PieChart,
  Pie,
} from 'recharts';
import pieBg from '@assets/images/screen/pieBg.webp';
import {useBarChartState, usePieChartState} from './hooks';

const pieColors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const ChartsGroup: FC = function () {
  const pieData = usePieChartState();
  const barData = useBarChartState();

  return (
    <>
      <h3 className={css.title}>
        <img src={goodsIcon} />
        <p>当前库存预警</p>
      </h3>

      <BarChart
        width={400}
        height={260}
        data={barData}
        barSize={12}
        margin={{left: -20, right: 10}}
      >
        <XAxis dataKey='name' stroke='#fff' fontSize='14' />
        <YAxis dataKey='data' stroke='#fff' fontSize='14' />
        <CartesianGrid strokeDasharray='8' vertical={false} />
        <defs>
          {barData.map(function ({name}, idx) {
            const color = idx % 2 === 0 ? '#19AAFC' : '#FB972C';

            return (
              <linearGradient
                key={name}
                id={`colorUv${idx}`}
                x1='0'
                y1='0'
                x2='0'
                y2='100%'
                spreadMethod='reflect'
              >
                <stop offset='0' stopColor={color} stopOpacity={1} />
                <stop offset='0.3' stopColor={color} stopOpacity={0.6} />
                <stop offset='1' stopColor={color} stopOpacity={0.3} />
              </linearGradient>
            );
          })}
        </defs>
        <Bar
          dataKey='data'
          background={{fill: '#fff', opacity: '0.1'}}
          radius={4}
        >
          {barData.map(function ({name}, idx) {
            return <Cell key={name} fill={`url(#colorUv${idx})`} />;
          })}
        </Bar>
      </BarChart>

      <h3 className={css.title}>
        <img src={pieIcon} />
        <p>当前到货物料属性占比</p>
      </h3>

      <div className={css.pieChart}>
        <img src={pieBg} className={css.pieBg} />
        <PieChart width={400} height={200}>
          <Pie
            dataKey='value'
            nameKey='name'
            data={pieData}
            label={(entry: any) => entry.name}
          >
            {pieData.map(function ({name}, idx) {
              return <Cell key={name} fill={pieColors[idx % 4]} />;
            })}
          </Pie>
        </PieChart>
      </div>
    </>
  );
};

export default ChartsGroup;
