import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';
// import { uuid } from 'utils/tool';
import PieImg from 'editorAssets/pie.png';

import styles from './index.less';
import { IChartConfig } from './schema';

interface XChartProps extends IChartConfig {
  isTpl: boolean;
}

interface DataMap {
  [name: string]: number | string;
}

const XLine = (props: XChartProps) => {
  const { isTpl, data, color, size, paddingTop, title } = props;
  const chartRef = useRef(null);
  useEffect(() => {
    if (!isTpl) {
      const chart = new Chart({
        el: chartRef.current || undefined,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      });

      // step 2: 处理数据
      const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' }));

      // Step 2: 载入数据源
      chart.source(dataX, {
        percent: {
          formatter: function formatter(val) {
            return val * 100 + '%';
          },
        },
      });

      // 获取数据的map类型，用以展示图例说明
      const dataMap: DataMap = dataX.reduce((prev: any, cur) => {
        return prev.name
          ? { [prev.name]: prev.value, ...{ [cur.name]: cur.value } }
          : { ...prev, ...{ [cur.name]: cur.value } };
      });

      chart.legend({
        position: 'right',
        itemFormatter: function itemFormatter(val) {
          return val + '  ' + dataMap[val] + '%';
        },
      });
      chart.tooltip(false);
      chart.coord('polar', {
        transposed: true,
        radius: 0.85,
      });
      chart.axis(false);
      chart
        .interval()
        .position('a*value')
        .color('name', [
          '#1890FF',
          '#13C2C2',
          '#2FC25B',
          '#FACC14',
          '#00CC99',
          '#CC3366',
          '#CC6600',
          '#CC66CC',
          '#FF3366',
          '#0066CC',
        ])
        .adjust('stack')
        .style({
          lineWidth: 1,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round',
        })
        .animate({
          appear: {
            duration: 1200,
            easing: 'bounceOut',
          },
        });

      chart.render();
    }
  }, [data, isTpl]);
  return (
    <div className={styles.chartWrap}>
      <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
        {title}
      </div>
      {isTpl ? <img src={PieImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
    </div>
  );
};

export default memo(XLine);