import './index.css';
import { getBase, getGradientColor } from '../../utils/chartOption/base';
import * as tooltipFormatter from '../../utils/chartOption/tooltip';
import { basePlotLines } from '../../utils/chartOption/plotLines';

const formatter: any = tooltipFormatter;

const common = (
  config: any,
  {
    yTitle = '', categories = null,
    yLabelsFormat = null, tipFmt = '',
    yPlotLines = null
  }
) => {
  if (typeof yTitle === 'string') {
    config.yAxis.title.text = yTitle;
  } else {
    config.yAxis.title = {
      ...config.yAxis.title,
      ...(yTitle || {}),
    };
  }
  config.yAxis.labels.format = yLabelsFormat || '{value}';
  config.xAxis.categories = categories;
  if (tipFmt) {
    config.tooltip.formatter = formatter[tipFmt];
  }
  if (yPlotLines) {
    config.yAxis.plotLines = basePlotLines(yPlotLines);
  }
  return config;
};

const AreaSpline = (config: any) => {
  const base: any = common(getBase(), { ...config });
  const { series} = config;
  base.chart.type = 'areaspline';
  base.series = getGradientColor(series);
  return base;
};

const LineBar = (config: any) => {
  const {
    yTitle = [], lineSeries, barSeries, yLabelsFormat,
    lineYPlotLines, barYPlotLines, tipFmt,
  } = config;

  const base: any = getBase();
  const yAxis1 = base.yAxis;
  const yAxis2 = JSON.parse(JSON.stringify(base.yAxis));

  const y1 = yTitle[0];
  const y2 = yTitle[1];
  if (typeof y1 === 'string') {
    yAxis1.title.text = y1;
  } else {
    yAxis1.title = {
      ...yAxis1.title,
      ...(y1 || {}),
    };
  }
  yAxis1.labels.format = yLabelsFormat ? yLabelsFormat[0] : '{value}';
  if (lineYPlotLines) yAxis1.plotLines = basePlotLines(lineYPlotLines);

  if (typeof y2 === 'string') {
    yAxis2.title.text = y2;
  } else {
    yAxis2.title = {
      ...yAxis2.title,
      ...(y2 || {}),
    };
  }
  yAxis2.opposite = true;
  yAxis2.labels.format = yLabelsFormat ? yLabelsFormat[1] : '{value}';
  if (barYPlotLines) yAxis2.plotLines = basePlotLines(barYPlotLines);

  lineSeries.forEach((val: any) => {
    val.type = 'areaspline';
    val.yAxis = 0;
  });
  barSeries.forEach((val: any) => {
    val.type = 'column';
    val.yAxis = 1;
  });

  base.yAxis = [yAxis1, yAxis2];
  base.chart.marginRight = null;
  base.series = [...barSeries, ...getGradientColor(lineSeries)];
  base.xAxis.categories = config.categories;
  if (tipFmt) {
    base.tooltip.formatter = formatter[tipFmt];
  }
  return base;
};

const MinArea = (config: any) => {
  const base = AreaSpline(config);

  return {
    ...base,
    plotOptions: {
      series: {
        marker: {
          enabled: false,
          states: {
            hover: {
              enabled: false
            }
          }
        },
      }
    },
    chart: {
      ...base.chart,
      marginLeft: 0,
      marginTop: 0,
      marginRight: 0,
      marginBottom: 0,
    },
    tooltip: {
      ...base.tooltip,
      formatter(this: any) {
        return `
          <div
            style="
              background-color: rgba(31,41,71,.75);
              padding: 3px 10px;
              color: #fff;font-size: 12px;
              border-radius: 4px
            "
          >
            ${this.x}：${this.y}${this.points[0].series.userOptions.after || ''}
          </div>
        `;
      }
    },
    xAxis: {
      visible: false,
      categories: config.categories
    },
    yAxis: {
      visible: false
    },
    legend: {
      enabled: false
    },
  };
};

const doubleY = (config: any) => {
  const {
    yTitle = [], leftYData, rightYData, yLabelsFormat,
    leftYPlotLines, rightYPlotLines
  } = config;

  const base: any = getBase();
  const yAxis1 = base.yAxis;
  const yAxis2 = JSON.parse(JSON.stringify(base.yAxis));

  const y1 = yTitle[0];
  const y2 = yTitle[1];
  if (typeof y1 === 'string') {
    yAxis1.title.text = y1;
  } else {
    yAxis1.title = {
      ...yAxis1.title,
      ...(y1 || {}),
    };
  }
  yAxis1.labels.format = yLabelsFormat ? yLabelsFormat[0] : '{value}';
  if (leftYPlotLines) yAxis1.plotLines = basePlotLines(leftYPlotLines);

  if (typeof y2 === 'string') {
    yAxis2.title.text = y2;
  } else {
    yAxis2.title = {
      ...yAxis2.title,
      ...(y2 || {}),
    };
  }
  yAxis2.opposite = true;
  yAxis2.labels.format = yLabelsFormat ? yLabelsFormat[1] : '{value}';
  if (rightYPlotLines) yAxis2.plotLines = basePlotLines(rightYPlotLines);

  leftYData.forEach((val: any, i: number) => {
    val.yAxis = 0;
    if (val.type === 'areaspline') {
      val.fillColor = getGradientColor([''], i)[0].fillColor;
    }
  });
  rightYData.forEach((val: any, i: number) => {
    val.yAxis = 1;
    if (val.type === 'areaspline') {
      val.fillColor = getGradientColor([''], leftYData.length + i)[0].fillColor;
    }
  });

  base.yAxis = [yAxis1, yAxis2];
  base.chart.marginRight = null;
  base.series = [...leftYData, ...rightYData];
  base.xAxis.categories = config.categories;
  return base;
};

export { AreaSpline, LineBar, MinArea, doubleY };