/* eslint-disable no-restricted-syntax */
import { getAxisFormatter, getTooltipFormatter } from '@/components/base-chart/formatters';
import { colors } from '@/utils';
import { merge, multiply } from 'lodash-es';

const getXAxisOption = option => {
  return merge(
    {
      type: 'category',
      axisLabel: {
        margin: 8,
        color: 'rgba(135, 138, 162, 1)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(233, 234, 247, 1)',
        },
      },
      axisPointer: {
        snap: true,
        type: 'line',
        lineStyle: {
          width: 2,
          color: '#E6E7F5',
        },
      },
      axisTick: {
        show: false,
      },
      boundaryGap: true,
    },
    option
  );
};
const getYAxisOption = option => {
  return merge(
    {
      show: true,
      alignTicks: true,
      axisLabel: {
        // y轴隐藏时也要隐藏axisLabel，否则grid.containLabel为true时，
        // axisLabel也会占据grid空间
        show: option?.show ?? true,
        margin: 10,
        fontSize: 12,
        color: '#878AA2',
        formatter: getAxisFormatter(),
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#cdcedb',
        },
      },
      nameLocation: 'end',
      nameGap: 12,
      nameTextStyle: {
        fontSize: 12,
        fontWeight: 400,
        color: '#808695',
      },
    },
    option
  );
};
const getTooltipOption = option => {
  return merge(
    {
      trigger: 'axis',
      appendToBody: false,
      axisPointer: {
        type: 'none',
      },
      formatter: getTooltipFormatter(),
      renderMode: 'html',
      backgroundColor: 'opacity',
      borderWidth: 0,
      extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0)',
    },
    option
  );
};
const getGridOption = option => {
  return merge(
    {
      top: '16px',
      bottom: '16px',
      left: '20px',
      right: '20px',
      containLabel: true,
    },
    option
  );
};

const getMarkLineOption = option => {
  return merge(
    {
      symbol: ['none', 'none'],
      lineStyle: {
        width: 1,
      },
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
        lineStyle: {
          type: 'dotted',
          width: 1,
        },
      },
    },
    option
  );
};

const getDefaultOption = option => {
  return {
    color: colors,
    backgroundColor: '#fff',
    tooltip: getTooltipOption(),
    legend: {
      show: false,
    },
    grid: getGridOption(),
    xAxis: getXAxisOption(),
    yAxis: getYAxisOption(),
    series: [],
  };
};

export { getYAxisOption, getDefaultOption, getGridOption, getTooltipOption, getMarkLineOption };
