import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import { useI18n } from '@/hooks/web/useI18n'
import { defaultsDeep } from 'lodash-es'

const { t } = useI18n()
const DEFAULT_LIQUID_DATA = []
/**
 * 水波图
 */
export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
  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'],
    'label-selector': ['fontSize', 'color', 'showQuota', 'showProportion'],
    'misc-selector': [
      'liquidShape',
      'liquidSize',
      'liquidMaxType',
      'liquidMaxField',
      'liquidShowBorder',
      'liquidBorderWidth',
      'liquidBorderDistance'
    ],
    'title-selector': [
      'title',
      'fontSize',
      'color',
      'hPosition',
      'isItalic',
      'isBolder',
      'remarkShow',
      'fontFamily',
      'letterSpace',
      'fontShadow'
    ],
    threshold: ['liquidThreshold']
  }
  axis: AxisType[] = ['yAxis', 'filter']
  axisConfig: AxisConfig = {
    yAxis: {
      name: `${t('chart.drag_block_progress')} / ${t('chart.quota')}`,
      type: 'q',
      limit: 1
    }
  }

  async drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): Promise<G2Liquid> {
    const { chart, container, action } = drawOptions
    if (!chart.data?.series || !chart.yAxis.length) {
      return
    }
    const initOptions: LiquidOptions = {
      percent: 0
    }
    const options = this.setupOptions(chart, initOptions)
    const { Liquid: G2Liquid } = await import('@antv/g2plot/esm/plots/liquid')
    const newChart = new G2Liquid(container, options)
    newChart.on('afterrender', () => {
      action({
        from: 'liquid',
        data: {
          type: 'liquid',
          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 configTheme(chart: Chart, options: LiquidOptions): LiquidOptions {
    const customAttr = parseJson(chart.customAttr)
    const colors: string[] = []
    if (customAttr.basicStyle) {
      const basicStyle = customAttr.basicStyle
      basicStyle.colors.forEach(ele => {
        colors.push(hexColorToRGBA(ele, basicStyle.alpha))
      })
    }
    const customStyle = parseJson(chart.customStyle)
    let bgColor
    if (customStyle.background) {
      bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
    }
    const theme = {
      styleSheet: {
        brandColor: colors[0],
        paletteQualitative10: colors,
        paletteQualitative20: colors,
        backgroundColor: bgColor
      }
    }
    return { ...options, theme }
  }

  protected configMisc(chart: Chart, options: LiquidOptions): LiquidOptions {
    const customAttr = parseJson(chart.customAttr)
    let value = 0
    if (chart.data.series.length > 0) {
      value = chart.data.series[0].data[0]
    }
    let max, radius, shape
    if (customAttr.misc) {
      const misc = customAttr.misc
      const defaultLiquidMax = chart.data?.series[chart.data?.series.length - 1]?.data[0]
      if (misc.liquidMaxType === 'dynamic') {
        max = defaultLiquidMax
      } else {
        max = misc.liquidMax ? misc.liquidMax : defaultLiquidMax
      }
      radius = (misc.liquidSize ? misc.liquidSize : DEFAULT_MISC.liquidSize) / 100
      shape = misc.liquidShape ?? DEFAULT_MISC.liquidShape
    }
    const size: LiquidOptions = {
      percent: value / max,
      radius: radius,
      shape: shape
    }
    const { misc } = customAttr
    if (misc?.liquidShowBorder) {
      defaultsDeep(size, {
        outline: {
          border: misc.liquidBorderWidth ?? DEFAULT_MISC.liquidBorderWidth,
          distance: misc.liquidBorderDistance ?? DEFAULT_MISC.liquidBorderDistance
        }
      })
    }
    return { ...options, ...size }
  }

  protected configLabel(chart: Chart, options: LiquidOptions): LiquidOptions {
    const customAttr = parseJson(chart.customAttr)
    const originVal = options.percent
    // 数值过大图表会异常，大于 1 无意义
    if (originVal > 1) {
      options = {
        ...options,
        percent: 1
      }
    }
    if (!customAttr.label?.show) {
      return {
        ...options,
        statistic: {
          content: false
        }
      }
    }
    const label = customAttr.label
    const style = {
      fontSize: label.fontSize.toString() + 'px',
      color: label.color,
      lineHeight: '"unset"',
      overflow: 'visible',
      opacity: 1
    }
    const title = label.showQuota
      ? {
          style,
          formatter: () => {
            return valueFormatter(chart.data.series[0].data[0], label.quotaLabelFormatter)
          }
        }
      : false
    const content = label.showProportion
      ? {
          style,
          formatter: () => {
            return (originVal * 100).toFixed(label.reserveDecimalCount) + '%'
          }
        }
      : false

    return {
      ...options,
      statistic: {
        title,
        content
      }
    }
  }

  protected configThreshold(chart: Chart, options: LiquidOptions): LiquidOptions {
    const senior = parseJson(chart.senior)
    if (senior?.threshold?.enable) {
      const { liquidThreshold } = senior?.threshold
      if (liquidThreshold) {
        const { paletteQualitative10: colors } = (options.theme as any).styleSheet
        const liquidStyle = () => {
          const thresholdArr = liquidThreshold.split(',')
          let index = 0
          thresholdArr.forEach((v, i) => {
            if (options.percent > parseFloat(v) / 100) {
              index = i + 1
            }
          })
          return {
            fill: colors[index % colors.length],
            stroke: colors[index % colors.length]
          }
        }
        return { ...options, liquidStyle }
      }
    }
    return options
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    chart.customAttr.label = {
      ...chart.customAttr.label,
      fontSize: 12,
      show: true,
      labelFormatter: {
        type: 'percent',
        thousandSeparator: true,
        decimalCount: 2
      }
    }
    return chart
  }

  protected setupOptions(chart: Chart, options: LiquidOptions): LiquidOptions {
    return flow(
      this.configTheme,
      this.configMisc,
      this.configLabel,
      this.configThreshold
    )(chart, options)
  }
  constructor() {
    super('liquid', DEFAULT_LIQUID_DATA)
  }
}