const contrastColor = '#4b4b4b';
const axisCommon = () => {
  return {
    axisLine: {
      lineStyle: {
        color: contrastColor,
      },
    },
    axisTick: {
      lineStyle: {
        color: contrastColor,
      },
    },
    axisLabel: {
      textStyle: {
        color: contrastColor,
      },
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#aaa',
      },
    },
    splitArea: {
      areaStyle: {
        color: contrastColor,
      },
    },
  };
};

const colorPalette = [
  '#dd6b66',
  '#759aa0',
  '#e69d87',
  '#8dc1a9',
  '#ea7e53',
  '#eedd78',
  '#73a373',
  '#73b9bc',
  '#7289ab',
  '#91ca8c',
  '#f49f42',
];
export const DEFAULT_THEME = {
  // categoryAxis: {
  //   axisLine: { show: false },
  //   axisTick: { show: false },
  //   splitLine: { show: false },
  // },
  // valueAxis: {
  //   axisLine: { show: false },
  // },
  // line: {
  //   smooth: true,
  // },
  // grid: {
  //   containLabel: true,
  //   left: 10,
  //   right: 10,
  // },
  color: colorPalette,
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: contrastColor,
      },
      crossStyle: {
        color: contrastColor,
      },
    },
  },
  legend: {
    textStyle: {
      color: contrastColor,
    },
  },
  textStyle: {
    color: contrastColor,
  },
  title: {
    textStyle: {
      color: contrastColor,
    },
  },
  toolbox: {
    iconStyle: {
      normal: {
        borderColor: contrastColor,
      },
    },
  },
  dataZoom: {
    textStyle: {
      color: contrastColor,
    },
  },
  timeline: {
    lineStyle: {
      color: contrastColor,
    },
    itemStyle: {
      normal: {
        color: colorPalette[1],
      },
    },
    label: {
      normal: {
        textStyle: {
          color: contrastColor,
        },
      },
    },
    controlStyle: {
      normal: {
        color: contrastColor,
        borderColor: contrastColor,
      },
    },
  },
  timeAxis: axisCommon(),
  logAxis: axisCommon(),
  valueAxis: axisCommon(),
  categoryAxis: axisCommon(),

  line: {
    symbol: 'circle',
  },
  graph: {
    color: colorPalette,
  },
  gauge: {
    title: {
      textStyle: {
        color: contrastColor,
      },
    },
  },
  candlestick: {
    itemStyle: {
      normal: {
        color: '#FD1050',
        color0: '#0CF49B',
        borderColor: '#FD1050',
        borderColor0: '#0CF49B',
      },
    },
  },
};

export const DEFAULT_COLORS = [
  '#19d4ae',
  '#5ab1ef',
  '#fa6e86',
  '#ffb980',
  '#0067a6',
  '#c4b4e4',
  '#d87a80',
  '#9cbbff',
  '#d9d0c7',
  '#87a997',
  '#d49ea2',
  '#5b4947',
  '#7ba3a8',
];

export const HEAT_MAP_COLOR = [
  '#313695',
  '#4575b4',
  '#74add1',
  '#abd9e9',
  '#e0f3f8',
  '#ffffbf',
  '#fee090',
  '#fdae61',
  '#f46d43',
  '#d73027',
  '#a50026',
];

export const HEAT_BMAP_COLOR = ['blue', 'blue', 'green', 'yellow', 'red'];

export const itemPoint = (color: string) => {
  return [
    '<span style="',
    `background-color:${color};`,
    'display: inline-block;',
    'width: 10px;',
    'height: 10px;',
    'border-radius: 50%;',
    'margin-right:2px;',
    '"></span>',
  ].join('');
};

export const STATIC_PROPS = [
  'initOptions',
  'loading',
  'dataEmpty',
  'judgeWidth',
  'widthChangeDelay',
];

export const ECHARTS_SETTINGS = [
  'grid',
  'dataZoom',
  'visualMap',
  'toolbox',
  'title',
  'legend',
  'xAxis',
  'yAxis',
  'radar',
  'tooltip',
  'axisPointer',
  'brush',
  'geo',
  'timeline',
  'graphic',
  'series',
  'backgroundColor',
  'textStyle',
];