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

const contrastColor = '#B9B8CE'
const backgroundColor = '#262626'
const axisCommon = function () {
  return {
    axisLine: {
      lineStyle: {
        color: contrastColor,
      },
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#484753',
      },
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)'],
      },
    },
    minorSplitLine: {
      lineStyle: {
        color: '#20203B',
      },
    },
  }
}

const colorPalette = [
  '#4992ff',
  '#7cffb2',
  '#fddd60',
  '#ff6e76',
  '#58d9f9',
  '#05c091',
  '#ff8a45',
  '#8d48e3',
  '#dd79ff',
]
const palette = {
  color: colorPalette,
  backgroundColor,
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: contrastColor,
      },
      crossStyle: {
        color: contrastColor,
      },
    },
  },
  legend: {
    textStyle: {
      color: contrastColor,
    },
  },
  title: {
    textStyle: {
      color: contrastColor,
    },
  },
  toolbox: {
    iconStyle: {
      borderColor: contrastColor,
    },
  },

  // Area scaling controller
  dataZoom: {
    dataBackgroundColor: '#eee', // Data background color
    fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
    handleColor: '#458c6b', // Handle color
  },

  timeline: {
    itemStyle: {
      color: colorPalette[1],
    },
    lineStyle: {
      color: contrastColor,
    },
    controlStyle: {
      color: contrastColor,
      borderColor: contrastColor,
    },
    label: {
      color: contrastColor,
    },
  },

  timeAxis: axisCommon(),
  logAxis: axisCommon(),
  valueAxis: axisCommon(),
  categoryAxis: axisCommon(),

  line: {
    symbol: 'circle',
  },
  graph: {
    color: colorPalette,
  },

  gauge: {
    axisLine: {
      lineStyle: {
        color: [
          [0.2, '#f2da87'],
          [0.8, '#458c6b'],
          [1, '#a62424'],
        ],
        width: 8,
      },
    },
  },
}

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