import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Gauge as G2Gauge, GaugeOptions } from '@antv/g2plot/esm/plots/gauge'
import { flow, parseJson } from '@/views/chart/components/js/util'
import {
  DEFAULT_LABEL,
  DEFAULT_MISC,
  DEFAULT_THRESHOLD,
  getScaleValue
} from '@/views/chart/components/editor/util/chart'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { useI18n } from '@/hooks/web/useI18n'
import { merge } from 'lodash-es'

const { t } = useI18n()

const DEFAULT_DATA = []
export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
  properties: EditorProperty[] = [
    'background-overall-component',
    'border-style',
    'basic-style-selector',
    'label-selector',
    'misc-selector',
    'title-selector',
    'threshold'
  ]
  propertyInner: EditorPropertyInner = {
    'background-overall-component': ['all'],
    'border-style': ['all'],
    'basic-style-selector': ['colors', 'alpha', 'gradient', 'gaugeAxisLine', 'gaugePercentLabel'],
    'label-selector': ['fontSize', 'color', 'labelFormatter'],
    'title-selector': [
      'title',
      'fontSize',
      'color',
      'hPosition',
      'isItalic',
      'isBolder',
      'remarkShow',
      'fontFamily',
      'letterSpace',
      'fontShadow'
    ],
    'misc-selector': [
      'gaugeMinType',
      'gaugeMinField',
      'gaugeMin',
      'gaugeMaxType',
      'gaugeMaxField',
      'gaugeMax',
      'gaugeStartAngle',
      'gaugeEndAngle'
    ],
    threshold: ['gaugeThreshold']
  }
  axis: AxisType[] = ['yAxis', 'filter']
  axisConfig: AxisConfig = {
    yAxis: {
      name: `${t('chart.drag_block_gauge_angel')} / ${t('chart.quota')}`,
      type: 'q',
      limit: 1
    }
  }

  async drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): Promise<G2Gauge> {
    const { chart, container, scale, action } = drawOptions
    if (!chart.data?.series || !chart.yAxis.length) {
      return
    }
    // options
    const initOptions: GaugeOptions = {
      percent: 0,
      appendPadding: [0, 10, 15, 10],
      axis: {
        tickInterval: 0.2,
        label: {
          style: {
            fontSize: getScaleValue(12, scale) // 刻度值字体大小
          }
        },
        tickLine: {
          length: getScaleValue(12, scale) * -1, // 刻度线长度
          style: {
            lineWidth: getScaleValue(1, scale) // 刻度线宽度
          }
        },
        subTickLine: {
          count: 4, // 子刻度数
          length: getScaleValue(6, scale) * -1, // 子刻度线长度
          style: {
            lineWidth: getScaleValue(1, scale) // 子刻度线宽度
          }
        }
      }
    }
    const options = this.setupOptions(chart, initOptions, { scale })
    const { Gauge: G2Gauge } = await import('@antv/g2plot/esm/plots/gauge')
    const newChart = new G2Gauge(container, options)
    newChart.on('afterrender', () => {
      action({
        from: 'gauge',
        data: {
          type: 'gauge',
          max: chart.data?.series[0]?.data[0]
        }
      })
    })
    const hasNoneData = chart.data?.series.some(
      s => s.data?.[0] === undefined || s.data?.[0] === null
    )
    this.configEmptyDataStyle(hasNoneData ? [] : [1], container, newChart)
    if (hasNoneData) {
      return
    }
    return newChart
  }

  protected configMisc(
    chart: Chart,
    options: GaugeOptions,
    context: Record<string, any>
  ): GaugeOptions {
    const customAttr = parseJson(chart.customAttr)
    const data = chart.data.series[0].data[0]
    let min, max, startAngle, endAngle
    if (customAttr.misc) {
      const misc = customAttr.misc
      if (misc.gaugeMinType === 'dynamic' && misc.gaugeMaxType === 'dynamic') {
        min = chart.data?.series[chart.data?.series.length - 2]?.data[0]
        max = chart.data?.series[chart.data?.series.length - 1]?.data[0]
      } else if (misc.gaugeMinType !== 'dynamic' && misc.gaugeMaxType === 'dynamic') {
        min = misc.gaugeMin || misc.gaugeMin === 0 ? misc.gaugeMin : DEFAULT_MISC.gaugeMin
        max = chart.data?.series[chart.data?.series.length - 1]?.data[0]
      } else if (misc.gaugeMinType === 'dynamic' && misc.gaugeMaxType !== 'dynamic') {
        min = chart.data?.series[chart.data?.series.length - 1]?.data[0]
        max = misc.gaugeMax ? misc.gaugeMax : DEFAULT_MISC.gaugeMax
      } else {
        min = misc.gaugeMin || misc.gaugeMin === 0 ? misc.gaugeMin : DEFAULT_MISC.gaugeMin
        max = misc.gaugeMax
          ? misc.gaugeMax
          : chart.data?.series[chart.data?.series.length - 1]?.data[0]
      }
      startAngle = (misc.gaugeStartAngle * Math.PI) / 180
      endAngle = (misc.gaugeEndAngle * Math.PI) / 180
      context.min = min
      context.max = max
    }
    const percent = (parseFloat(data) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))
    const tmp = {
      percent,
      startAngle,
      endAngle
    }
    return { ...options, ...tmp }
  }

  private configRange(
    chart: Chart,
    options: GaugeOptions,
    context: Record<string, any>
  ): GaugeOptions {
    const { scale } = context
    const range = [0]
    let index = 0
    let flag = false
    let hasThreshold = false
    const theme = options.theme as any

    if (chart.senior) {
      const senior = parseJson(chart.senior)
      const threshold = senior.threshold ?? DEFAULT_THRESHOLD
      if (threshold.enable && threshold.gaugeThreshold) {
        hasThreshold = true
        const arr = threshold.gaugeThreshold.split(',')
        for (let i = 0; i < arr.length; i++) {
          const ele = arr[i]
          const p = parseFloat(ele) / 100
          range.push(p)
          if (!flag && options.percent <= p) {
            flag = true
            index = i
          }
        }
        if (!flag) {
          index = arr.length
        }
      }
    }
    range.push(1)
    let rangOptions
    if (hasThreshold) {
      rangOptions = {
        range: {
          color: theme.styleSheet.paletteQualitative10,
          ticks: range
        },
        indicator: {
          pointer: {
            style: {
              stroke:
                theme.styleSheet.paletteQualitative10[
                  index % theme.styleSheet.paletteQualitative10.length
                ]
            }
          },
          pin: {
            style: {
              stroke:
                theme.styleSheet.paletteQualitative10[
                  index % theme.styleSheet.paletteQualitative10.length
                ],
              r: getScaleValue(10, scale)
            }
          }
        }
      }
    } else {
      rangOptions = {
        indicator: {
          pin: {
            style: {
              r: getScaleValue(10, scale)
            }
          }
        }
      }
    }
    const customAttr = parseJson(chart.customAttr)
    if (customAttr.basicStyle.gradient) {
      const colorList = (theme.styleSheet?.paletteQualitative10 || []).map(ele => {
        return setGradientColor(ele, true)
      })
      if (!rangOptions.range) {
        rangOptions.range = {
          color: colorList
        }
      } else {
        rangOptions.range.color = colorList
      }
    }
    return { ...options, ...rangOptions }
  }

  protected configLabel(
    chart: Chart,
    options: GaugeOptions,
    context?: Record<string, any>
  ): GaugeOptions {
    const customAttr = parseJson(chart.customAttr)
    const data = chart.data.series[0].data[0]
    let labelTitle: GaugeOptions['statistic']['title'] = false
    let labelContent: GaugeOptions['statistic']['content'] = false
    const label = customAttr.label
    const labelFormatter = label.labelFormatter ?? DEFAULT_LABEL.labelFormatter
    if (label.show && label.childrenShow) {
      labelTitle = {
        style: {
          fontSize: `${label.fontSize}px`,
          color: label.color
        },
        formatter: function () {
          return valueFormatter(data, labelFormatter)
        }
      } as GaugeOptions['statistic']['title']
    }
    const { min, max } = context
    if (label.show && label.proportionSeriesFormatter.show) {
      const proportionFormatter = label.proportionSeriesFormatter
      labelContent = {
        offsetY: proportionFormatter.fontSize + label.fontSize,
        style: {
          fontSize: `${proportionFormatter.fontSize}px`,
          color: proportionFormatter.color
        },
        formatter: function () {
          const proportionValue = ((parseFloat(data) - min) / (max - min)) * 100
          return (
            t('chart.proportion') +
            '： ' +
            proportionValue.toFixed(proportionFormatter.formatterCfg.decimalCount) +
            '%'
          )
        }
      } as GaugeOptions['statistic']['content']
    }
    const statistic = {
      title: labelTitle,
      content: labelContent
    }
    const { gaugeAxisLine, gaugePercentLabel } = customAttr.basicStyle
    const tmp = {
      axis: {
        label: {
          formatter: v => {
            if (gaugeAxisLine === false) {
              return ''
            }
            if (gaugePercentLabel === false) {
              const resultV = v === '0' ? min : v === '1' ? max : min + (max - min) * v
              return labelFormatter.type === 'value'
                ? valueFormatter(resultV, labelFormatter)
                : resultV
            }
            return v === '0' ? v : v * 100 + '%'
          }
        }
      }
    }
    options = merge(options, tmp)
    return { ...options, statistic }
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    chart.customAttr.label = {
      ...chart.customAttr.label,
      show: true,
      labelFormatter: {
        type: 'value',
        thousandSeparator: true,
        decimalCount: 0,
        unit: 1
      }
    }
    return chart
  }

  protected setupOptions(
    chart: Chart,
    options: GaugeOptions,
    context: Record<string, any>
  ): GaugeOptions {
    return flow(
      this.configTheme,
      this.configMisc,
      this.configLabel,
      this.configRange
    )(chart, options, context)
  }
  constructor() {
    super('gauge', DEFAULT_DATA)
  }
}