/** @format */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import zrender from 'zrender';

import { customMergeWith } from '../../../utils';
import { globalTheme, ThemeData } from '../../../utils/theme';
import Echarts from '../Echarts';
import { Container } from './styled';
interface SCBarChartProps {
  size?: {
    width: number;
    height: number;
  };
  option?: Record<string, any>;
  data?: Record<string, any>;
  theme?: ThemeData;
  unit?: string;
  isShowArea?: boolean;
}

const SCBarChart = (props: SCBarChartProps) => {
  const {
    size = { height: 215, width: 372 },
    option = {},
    isShowArea = false,
    theme = {
      colorList: [...globalTheme.colorList],
      textColor: '#fff',
      primaryColor: '#000',
    },
    data,
    data: {
      xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      yData = [[80, 20, 30, 40, 50, 60, 70]],
    } = {},
    unit,
  } = props;

  const themeList = theme ? theme : globalTheme;
  const [isLegendShow, setIsLegendShow] = useState(false);
  const [colorArray, setColorArray] = useState([]);
  const [seriesNameArray, setSeriesNameArray] = useState([]);

  const optionBase = {
    color: [...themeList.colorList],
    tooltip: {
      show: true,
      trigger: 'axis',
      triggerOn: 'mousemove',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      },
      hideDelay: 100,
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
    },
    legend: {
      show: false,
      padding: 2,
      itemGap: 5,
      itemWidth: 6,
      icon: 'circle',
      itemHeight: 6,
      left: 'center',
      orient: 'horizontal',
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 12,
        color: '#999',
      },
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 10,
      top: 40,
      containLabel: true,
    },
    xAxis: {
      name: '',
      type: 'category',
      show: true,
      data: xData,
      axisTick: {
        // alignWithLabel: true,
        show: false,
      },
      nameTextStyle: {},
      axisLabel: {
        show: true,
        color: themeList.textColor,
        fontWeight: 'normal',
        fontFamily: 'Microsoft YaHei',
        fontSize: 12,
        rotate: 0,
        interval: 0,
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#333' },
      },
      splitLine: {
        show: false,
        lineStyle: { color: '#999', type: 'dashed' },
      },
    },

    yAxis: {
      type: 'value',
      min: 0,
      max: 'dataMax',
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#999',
        fontWeight: 'normal',
        fontFamily: 'Microsoft YaHei',
        fontSize: 12,
        interval: 'auto',
        formatter: '{value}',
      },
      axisLine: {
        show: false,
        lineStyle: { color: '#333' },
      },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(255,255,255,0.1)', type: 'dashed' },
      },
      name: unit,
      nameTextStyle: {
        color: themeList.textColor,
      },
    },

    series: [],
    animation: true,
    animationEasing: 'cubicOut',
    animationEasingUpdate: 'cubicOut',
    animationDuration: 500,
    animationDurationUpdate: 300,
  };

  const baseSeriesItemStyle = {
    borderWidth: 3,
    opacity: 0,
  };

  const [latestOption, setLatestOption] = useState(optionBase);

  function formatSeries(
    data: Record<string, any>,
    index: number,
    isPile: boolean,
    op = {},
  ) {
    const series = (option && option.series && option.series[index]) || {};
    const themeColor = themeList.colorList && themeList.colorList[index];
    const areaStylexy = isPile
      ? {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
        }
      : {
          x: 1,
          y: 1,
          x2: 0,
          y2: 0,
        };

    const r = {
      name: series.name || `系列${index + 1}`,
      type: series.type || 'line',
      data: data,
      markPoint: series.markPoint
        ? series.markPoint
        : {
            data: [{ type: 'max', name: '最大值' }],
            symbol: 'pin', //使用此方式隐藏图标
            symbolSize: 0.1,
            symbolOffset: [0, -10],
            label: {
              color: themeColor,
            },
          },
      // itemStyle: customMergeWith(series.itemStyle, baseSeriesItemStyle, {
      //   color: new zrender.LinearGradient(1, 0, 0, 0, [
      //     {
      //       offset: 0,
      //       color: themeColor,
      //     },
      //     {
      //       offset: 1,
      //       color: 'rgb(80, 225, 168, 0.1)',
      //     },
      //   ]),
      // }),

      barCategoryGap: series.barCategoryGap || null,
      barGap: '100%',
      label: series.label,
      barWidth: 6,
      stack: series.stack ? series.stack : '',
      areaStyle: {
        opacity: isShowArea ? 1 : 0,
        color: {
          type: 'linear',
          ...areaStylexy,
          colorStops: [
            {
              offset: 0,
              color: themeColor, // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(9,9,9,0)', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    };

    const latestSeries = _.mergeWith(r, op);
    latestSeries.data = data;
    return latestSeries;
  }

  useEffect(() => {
    const isPile = yData.length > 1;
    const mergedOption = customMergeWith(optionBase, option, {
      xAxis: { data: xData },
      series: yData.map((item: Record<string, any>, index: number) => {
        return formatSeries(
          item,
          index,
          isPile,
          option.series && option.series[index],
        );
      }),
    });
    // legend不以默认方式显示，自定义样式
    if (mergedOption.legend && mergedOption.legend.show) {
      mergedOption.legend.show = false;
      setIsLegendShow(true);
    }

    setLatestOption(mergedOption);
    setColorArray(mergedOption.color);
    setSeriesNameArray(
      mergedOption.series.map((item: Record<string, any>) => item.name),
    );
  }, [theme.primaryColor, option, data]);
  return (
    <Container style={{ height: `${size.height}px`, width: `${size.width}px` }}>
      <Echarts size={size} option={latestOption} />
      {isLegendShow ? (
        <div className="custom-legend">
          {seriesNameArray && seriesNameArray.length
            ? seriesNameArray.map((itemName, index) => {
                const color =
                  themeList.colorList[index % themeList.colorList.length];
                return (
                  <div key={index} className="legend-item">
                    <div className="legend-icon">
                      {/* <div
                        className="item-outer"
                        style={{ borderColor: color }}
                      ></div>
                      <div
                        className="item-inner"
                        style={{ background: color }}
                      ></div> */}
                      <div
                        className="item-line"
                        style={{ background: color }}
                      ></div>
                    </div>
                    <span className="legend-text">{itemName}</span>
                  </div>
                );
              })
            : null}
        </div>
      ) : null}
    </Container>
  );
};

export default SCBarChart;