import _ from 'lodash';
import {
  DEF_COLORS,
  DEF_GRAD_COLORS,
  colorOfSeries,
  toGRADColorForLine,
  buildDefaultColors,
} from './color';
import { isArray } from './types';
import { isAxisChart, isLineType } from './chart';
import { buildDefaultTooltip } from './tooltip';
import { buildDefaultLegend } from './legend';
import { globalConfig } from './global';

// 默认标题配置

// const titleFormater = text => `{prefix|}{t|${title}}{suffix|内容}`;

export const buildDefaultTitle = (option) => {
  const { title } = option;
  const { show, text } = title ?? {};
  if (show && text) {
    return {
      left: 12,
      top: 12,
      textStyle: {
        rich: {
          prefix: {
            width: 5,
            height: 16,
            backgroundColor: globalConfig.primaryColor,
          },
          t: {
            fontSize: 15,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'bold',
            color: '#333333',
            padding: [0, 0, 0, 10],
          },
          suffix: {
            fontSize: 12,
            color: '#999999',
            padding: [0, 0, 0, 5],
          },
        },
      },
    };
  } else {
    return { show: false };
  }
};

export const defaultGrid = {
  right: 40,
  left: 60,
};

export const buildDefaultGrid = (option) => {
  const { title, yAxis, series } = option;
  const axisArr = isArray(yAxis) ? yAxis : _.isObject(yAxis) ? [yAxis] : [];
  const seriesArr = isArray(series) ? series : _.isObject(series) ? [series] : [];
  const hasName = axisArr.some((d) => !!d.name) || seriesArr.some((d) => !!d.unit);
  const hasTitle = !!title && title.show;
  const top = hasTitle && hasName ? 70 : 50;
  return { right: 40, left: 60, top, bottom: 40 };
};

export const defaultDataZoom = [
  {
    type: 'inside',
  },
];

// 直角坐标系图表x轴默认配置（非直角坐标系图表不能有xAxis配置，会报错）
export const buildDefaultXAxis = (axis) => {
  const cfg = {
    show: true,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#e2e2e2',
      },
    },
    axisTick: {
      show: true,
      inside: true,
      lineStyle: {
        color: '#e2e2e2',
      },
    },
    axisLabel: {
      show: true,
      color: '#5b5b5b',
      hideOverlap: true,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#e2e2e2',
      },
    },
  };
  if (axis && axis.type === 'time') {
    cfg.axisLabel.formatter = {
      year: '{yyyy}',
      month: '{MM}月',
      day: '{MM}-{dd}',
      hour: '{HH}:{mm}',
      minute: '{HH}:{mm}',
      second: '{HH}:{mm}:{ss}',
      millisecond: '{hh}:{mm}:{ss} {SSS}',
      none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}',
    };
  }
  return cfg;
};

export const defaultXAxis = {
  show: true,
  axisLine: {
    show: true,
    lineStyle: {
      color: '#e2e2e2',
    },
  },
  axisTick: {
    show: true,
    inside: true,
    lineStyle: {
      color: '#e2e2e2',
    },
  },
  axisLabel: {
    show: true,
    color: '#5b5b5b',
    hideOverlap: true,
  },
  splitLine: {
    show: false,
    lineStyle: {
      color: '#e2e2e2',
    },
  },
};

export const defaultYAxis = {
  show: true,
  alignTicks: true,
  nameGap: 25,
  nameTextStyle: {
    align: 'right',
    padding: 0,
    color: '#8e8e8e',
  },
  axisLine: {
    show: false,
    lineStyle: {
      color: '#e2e2e2',
    },
  },
  axisTick: {
    show: false,
    inside: true,
    lineStyle: {
      color: '#e2e2e2',
    },
  },
  axisLabel: {
    show: true,
    color: '#8e8e8e',
  },
  splitLine: {
    show: true,
    lineStyle: {
      color: '#e2e2e2',
      type: 'dashed',
    },
  },
};

export const buildAxisPointer = (option) => {
  if (!option || !option.xAxis) return null;
  const { xAxis: x } = option;
  const xAxis = isArray(x) ? x : _.isObject(x) ? [x] : [];

  const type = xAxis.some((item) => item.type === 'category') ? 'shadow' : 'line';
  const typeConfig =
    type === 'line'
      ? {
          lineStyle: {
            type: 'solid',
            color: 'rgba(22,133,255,0.3)',
          },
        }
      : {};
  return {
    z: 3,
    type,
    ...typeConfig,
  };
};

// 折线图: 圆形标记点
// 曲线图: 不加标记点
// 折线面积图: 圆形标记点、面积渐变色配置
// 曲线面积图: 不加标记点、面积渐变色配置
const seriesItem = (series, index) => {
  const cfg = {};

  if (isLineType(series)) {
    // cfg.symbol = 'ciecle';
    cfg.symbolSize = 4;
    cfg.showSymbol = !series.smooth;
    cfg.areaStyle = series.areaStyle && {
      opacity: 1,
      color: toGRADColorForLine(colorOfSeries(index)),
    };
  }
  return _.merge(cfg, series);
};

export const buildDefaultSeries = (option) => {
  const { series } = option;
  const serieArr = isArray(series) ? series : !!series ? [series] : [];
  const defaultSeries = serieArr.map(seriesItem);
  return isArray(series) ? defaultSeries : !!series ? defaultSeries[0] : null;
};

export const buildDefaultOption = (option) => {
  const exports = {};
  exports.color = buildDefaultColors();
  exports.title = buildDefaultTitle(option);
  (option.dataZoom == undefined || option.dataZoom === null) &&
    (exports.dataZoom = defaultDataZoom);
  exports.tooltip = buildDefaultTooltip(option);
  return exports;
};

export const buildSpecificOption = (option) => {
  const { xAxis, yAxis, grid, legend } = option;
  // 直角坐标系类图标
  if (isAxisChart(option)) {
    return _.merge(
      {},
      {
        xAxis: isArray(xAxis)
          ? xAxis.map((item) => ({ ...buildDefaultXAxis(item) }))
          : buildDefaultXAxis(xAxis),
        yAxis: isArray(yAxis) ? yAxis.map(() => ({ ...defaultYAxis })) : defaultYAxis,
        grid: isArray(grid)
          ? grid.map(() => ({ ...buildDefaultGrid(option) }))
          : buildDefaultGrid(option),
        legend: isArray(legend)
          ? legend.map(() => ({ ...buildDefaultLegend(option) }))
          : buildDefaultLegend(option),
        series: buildDefaultSeries(option),
        tooltip: {
          axisPointer: buildAxisPointer(option),
        },
      },
    );
  }
};
