import { defineConfig } from '@/utils/common'

const contrastColor = '#212121'
const backgroundColor = 'rgba(0,0,0,0)'
const axisCommon = function () {
  return {
    axisLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
    axisLabel: {
      color: '#8692a4',
    },
    splitLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
  }
}

const colorPalette = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
]
const palette = {
  color: colorPalette,
  backgroundColor,
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: contrastColor,
      },
      crossStyle: {
        color: contrastColor,
      },
    },
    backgroundColor: '#000',
    borderColor: 'rgb(51, 51, 51)',
    padding: [8, 12],
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    textStyle: {
      color: contrastColor,
    },
    pageIconColor: '#c2ccd8',
    pageIconInactiveColor: '#eff2f6',
  },
  title: {
    textStyle: {
      color: contrastColor,
    },
  },
  toolbox: {
    iconStyle: {
      borderColor: contrastColor,
    },
  },
  timeAxis: axisCommon(),
  logAxis: axisCommon(),
  valueAxis: axisCommon(),
  categoryAxis: axisCommon(),
}

export default defineConfig({
  name: 'light',
  palette,
})