import type {
  Bullet as G2Bullet,
  BulletOptions as G2BulletOptions
} from '@antv/g2plot/esm/plots/bullet'
import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import {
  BAR_AXIS_TYPE,
  BAR_EDITOR_PROPERTY,
  BAR_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/bar/common'
import { useI18n } from '@/hooks/web/useI18n'
import { flow, parseJson } from '@/views/chart/components/js/util'
import { BulletOptions } from '@antv/g2plot'
import { isEmpty } from 'lodash-es'
import {
  configAxisLabelLengthLimit,
  configPlotTooltipEvent,
  getPadding,
  getTooltipContainer,
  TOOLTIP_TPL
} from '@/views/chart/components/js/panel/common/common_antv'
import { valueFormatter } from '@/views/chart/components/js/formatter'

const { t } = useI18n()

/**
 * 子弹图
 */
export class BulletGraph extends G2PlotChartView<G2BulletOptions, G2Bullet> {
  constructor() {
    super('bullet-graph', [])
  }

  axis: AxisType[] = [...BAR_AXIS_TYPE, 'yAxisExt', 'extBubble']
  axisConfig = {
    ...this['axisConfig'],
    xAxis: { name: `${t('chart.form_type')} / ${t('chart.dimension')}`, type: 'd', limit: 1 },
    yAxis: { name: `${t('chart.progress_current')} / ${t('chart.quota')}`, type: 'q', limit: 1 },
    yAxisExt: { name: `${t('chart.progress_target')} / ${t('chart.quota')}`, type: 'q', limit: 1 },
    extBubble: {
      name: `${t('chart.range_bg')} / ${t('chart.quota')}`,
      type: 'q',
      allowEmpty: true,
      limit: 1
    }
  }
  properties: EditorProperty[] = [
    ...BAR_EDITOR_PROPERTY.filter(
      item => !['function-cfg', 'assist-line', 'threshold'].includes(item)
    ),
    'bullet-graph-selector'
  ]
  propertyInner = {
    'basic-style-selector': ['radiusColumnBar', 'layout'],
    'label-selector': ['hPosition', 'fontSize', 'color', 'labelFormatter'],
    'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
    'x-axis-selector': [
      ...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'].filter(item => item != 'position'),
      'showLengthLimit'
    ],
    'y-axis-selector': [
      ...BAR_EDITOR_PROPERTY_INNER['y-axis-selector'].filter(
        item => item !== 'axisValue' && item !== 'position'
      ),
      'axisLabelFormatter'
    ],
    'legend-selector': ['showRange', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition']
  }

  async drawChart(drawOption: G2PlotDrawOptions<G2Bullet>): Promise<G2Bullet> {
    const { chart, container, action } = drawOption
    if (!chart.data?.data?.length) return
    const result = mergeBulletData(chart)
    // 处理自定义区间
    const { bullet } = parseJson(chart.customAttr).misc
    if (bullet.bar.ranges.showType === 'fixed') {
      const customRange = bullet.bar.ranges.fixedRange?.map(item => item.fixedRangeValue) || [0]
      result.forEach(item => (item.ranges = customRange))
    } else {
      result.forEach(item => (item.ranges = item.originalRanges))
    }
    // 处理自定义目标值
    if (bullet.bar.target.showType === 'fixed') {
      const customTarget = bullet.bar.target.value || 0
      result.forEach(item => (item.target = customTarget))
    } else {
      result.forEach(item => (item.target = item.originalTarget))
    }
    const initialOptions: BulletOptions = {
      appendPadding: getPadding(chart),
      data: result.reverse(),
      measureField: 'measures',
      rangeField: 'ranges',
      targetField: 'target',
      xField: 'title',
      meta: {
        title: {
          type: 'cat'
        }
      },
      interactions: [
        {
          type: 'active-region',
          cfg: {
            start: [{ trigger: 'element:mousemove', action: 'active-region:show' }],
            end: [{ trigger: 'element:mouseleave', action: 'active-region:hide' }]
          }
        }
      ]
    }
    const options = this.setupOptions(chart, initialOptions)
    let newChart = null
    const { Bullet: BulletClass } = await import('@antv/g2plot/esm/plots/bullet')
    newChart = new BulletClass(container, options)
    newChart.on('element:click', ev => {
      const pointData = ev?.data?.data
      const dimensionList = options.data.find(item => item.title === pointData.title)?.dimensionList
      const actionParams = {
        x: ev.x,
        y: ev.y,
        data: {
          data: {
            ...pointData,
            dimensionList
          }
        }
      }
      action(actionParams)
    })
    configPlotTooltipEvent(chart, newChart)
    configAxisLabelLengthLimit(chart, newChart, null)
    return newChart
  }

  protected configBasicStyle(chart: Chart, options: BulletOptions): BulletOptions {
    const basicStyle = parseJson(chart.customAttr).basicStyle
    const { radiusColumnBar, columnBarRightAngleRadius, layout } = basicStyle
    let radiusValue = 0
    let rangeLength = 1
    if (radiusColumnBar === 'roundAngle' || radiusColumnBar === 'topRoundAngle') {
      radiusValue = columnBarRightAngleRadius
      rangeLength = options.data[0]?.ranges?.length
    }
    const barRadiusStyle = { radius: Array(2).fill(radiusValue) }
    const baseRadius = [...barRadiusStyle.radius, ...barRadiusStyle.radius]
    options = {
      ...options,
      bulletStyle: {
        range: datum => {
          if (!datum.rKey) return { fill: 'rgba(0, 0, 0, 0)' }
          if (rangeLength === 1) {
            return {
              radius:
                radiusColumnBar === 'topRoundAngle' ? [...barRadiusStyle.radius, 0, 0] : baseRadius
            }
          }
          if (rangeLength > 1 && datum.rKey === 'ranges_0') {
            return {
              radius: radiusColumnBar === 'topRoundAngle' ? [] : [0, 0, ...barRadiusStyle.radius]
            }
          }
          if (rangeLength > 1 && datum.rKey === 'ranges_' + (rangeLength - 1)) {
            return { radius: [...barRadiusStyle.radius, 0, 0] }
          }
        },
        measure: datum => {
          if (datum.measures) {
            return {
              radius:
                radiusColumnBar === 'topRoundAngle' ? [...barRadiusStyle.radius, 0, 0] : baseRadius
            }
          } else {
            return undefined
          }
        },
        target: datum => (datum.tKey === 'target' ? { lineWidth: 2 } : undefined)
      }
    }
    if (layout === 'vertical') options = { ...options, layout: 'vertical' }
    return options
  }

  protected configMisc(chart: Chart, options: BulletOptions): BulletOptions {
    const { bullet } = parseJson(chart.customAttr).misc
    const isDynamic = bullet.bar.ranges.showType === 'dynamic'
    // 动态背景按大小升序
    const rangeColor = isDynamic
      ? bullet.bar.ranges.fill
      : bullet.bar.ranges.fixedRange
          ?.sort((a, b) => (a.fixedRangeValue ?? 0) - (b.fixedRangeValue ?? 0))
          .map(item => item.fill) || []
    return {
      ...options,
      color: {
        measure: [].concat(bullet.bar.measures.fill),
        range: [].concat(rangeColor),
        target: [].concat(bullet.bar.target.fill)
      },
      size: {
        measure: bullet.bar.measures.size,
        range: bullet.bar.ranges.size,
        target: bullet.bar.target.size
      }
    }
  }

  protected configXAxis(chart: Chart, options: BulletOptions): BulletOptions {
    const tmpOptions = super.configXAxis(chart, options)
    if (!tmpOptions.xAxis || !tmpOptions.xAxis.label) return tmpOptions

    const { layout, xAxis } = tmpOptions
    const position = xAxis.position
    const style: any = { ...xAxis.label.style }

    if (layout === 'vertical') {
      style.textAlign = 'center'
      style.textBaseline = position === 'bottom' ? 'top' : 'bottom'
    } else {
      style.textAlign = position === 'bottom' ? 'end' : 'start'
      style.textBaseline = 'middle'
    }

    xAxis.label.style = style
    return tmpOptions
  }

  protected configYAxis(chart: Chart, options: BulletOptions): BulletOptions {
    const tmpOptions = super.configYAxis(chart, options)
    if (!tmpOptions.yAxis || !tmpOptions.yAxis.label) return tmpOptions

    const yAxis = parseJson(chart.customStyle).yAxis
    tmpOptions.yAxis.label.formatter = value => valueFormatter(value, yAxis.axisLabelFormatter)

    const { layout, yAxis: yAxisConfig } = tmpOptions
    const position = yAxisConfig.position
    const style: any = { ...yAxisConfig.label.style }

    if (layout === 'vertical') {
      style.textAlign = position === 'left' ? 'end' : 'start'
      style.textBaseline = 'middle'
    } else {
      style.textAlign = 'center'
      style.textBaseline = position === 'left' ? 'top' : 'bottom'
    }
    tmpOptions.yAxis.nice = false
    return tmpOptions
  }

  protected configLabel(chart: Chart, options: BulletOptions): BulletOptions {
    const tmpOptions = super.configLabel(chart, options)
    if (!tmpOptions.label) return tmpOptions

    const labelAttr = parseJson(chart.customAttr).label
    const label: any = {
      ...tmpOptions.label,
      formatter: param =>
        param.mKey === 'measures'
          ? valueFormatter(param.measures, labelAttr.labelFormatter)
          : undefined
    }
    return { ...tmpOptions, label: { measure: label } }
  }

  protected configLegend(chart: Chart, options: BulletOptions): BulletOptions {
    const baseLegend = super.configLegend(chart, options).legend
    if (!baseLegend) return options

    const { bullet } = parseJson(chart.customAttr).misc
    const customStyleLegend = parseJson(chart.customStyle).legend
    const items = []

    const createLegendItem = (value, name, symbol, fill, size = 4) => ({
      value,
      name,
      marker: { symbol, style: { fill, stroke: value === 'measure' ? '' : fill, r: size } }
    })

    if (customStyleLegend.showRange) {
      if (bullet.bar.ranges.showType === 'dynamic') {
        if (chart.extBubble.length) {
          const rangeName = chart.extBubble[0]?.chartShowName || bullet.bar.ranges.name
          items.push(
            createLegendItem(
              'dynamic',
              rangeName || chart.extBubble[0]?.name,
              bullet.bar.ranges.symbol,
              [].concat(bullet.bar.ranges.fill)[0],
              bullet.bar.ranges.symbolSize
            )
          )
        }
      } else {
        bullet.bar.ranges.fixedRange?.forEach(item => {
          items.push(
            createLegendItem(
              item.name,
              item.name,
              bullet.bar.ranges.symbol,
              item.fill,
              bullet.bar.ranges.symbolSize
            )
          )
        })
      }
    }

    const targetName = chart.yAxisExt[0]?.chartShowName || bullet.bar.target.name
    items.push(
      createLegendItem(
        'target',
        targetName || chart.yAxisExt[0]?.name,
        'line',
        [].concat(bullet.bar.target.fill)[0],
        bullet.bar.ranges.symbolSize
      )
    )

    const measureName = chart.yAxis[0]?.chartShowName || bullet.bar.measures.name
    items.push(
      createLegendItem(
        'measure',
        measureName || chart.yAxis[0]?.name,
        'square',
        [].concat(bullet.bar.measures.fill)[0],
        bullet.bar.ranges.symbolSize
      )
    )

    return {
      ...options,
      legend: { custom: true, position: baseLegend.position, layout: baseLegend.layout, items }
    }
  }

  protected configTooltip(chart: Chart, options: BulletOptions): BulletOptions {
    const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
    const tooltipAttr = customAttr.tooltip
    const { bullet } = parseJson(chart.customAttr).misc
    if (!tooltipAttr.show) return { ...options, tooltip: false }

    const formatterMap = tooltipAttr.seriesTooltipFormatter
      ?.filter(i => i.show)
      .reduce((pre, next, _index) => {
        switch (next.axisType) {
          case 'yAxis':
            pre['measures'] = next
            return pre
          case 'yAxisExt':
            pre['target'] = next
            return pre
          case 'extBubble':
            pre['ranges'] = next
            return pre
          default:
            return pre
        }
      }, {}) as Record<string, SeriesFormatter>

    const tooltip = {
      shared: true,
      showMarkers: true,
      customItems(originalItems) {
        if (!tooltipAttr.seriesTooltipFormatter?.length) return originalItems
        const isDynamic = bullet.bar.ranges.showType === 'dynamic'
        const rangeFormatter = chart.extBubble[0]
        const result = []
        const data = options.data.find(item => item.title === originalItems[0].title)
        Object.keys(formatterMap).forEach((key, _index) => {
          if (key === '记录数*') return
          const formatter = formatterMap[key]
          if (formatter) {
            let name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
            let value = valueFormatter(parseFloat(data[key] as string), formatter.formatterCfg)
            let color = bullet.bar[key]?.fill ?? 'grey'
            if (key === 'ranges') {
              if (!isDynamic && rangeFormatter) {
                name = isEmpty(rangeFormatter.chartShowName)
                  ? rangeFormatter.name
                  : rangeFormatter.chartShowName
                value = valueFormatter(parseFloat(data.minRanges[0]), rangeFormatter.formatterCfg)
                color = 'grey'
              } else {
                return
              }
            }
            result.push({
              color,
              name,
              value
            })
          }
        })
        const ranges = data.ranges
        const rangeFormatterCfg =
          formatterMap['ranges']?.formatterCfg ?? rangeFormatter?.formatterCfg
        ranges.forEach((range, index) => {
          const value = isDynamic
            ? valueFormatter(parseFloat(data.minRanges[0]), rangeFormatterCfg)
            : (range as string)
          let name = ''
          let color: string | string[]
          if (bullet.bar.ranges.showType === 'dynamic') {
            name = isEmpty(rangeFormatter.chartShowName)
              ? rangeFormatter.name
              : rangeFormatter.chartShowName
            color = bullet.bar['ranges'].fill
          } else {
            const customRange = bullet.bar.ranges.fixedRange[index].name
            name = customRange
              ? customRange
              : isEmpty(rangeFormatter.chartShowName)
              ? rangeFormatter.name
              : rangeFormatter.chartShowName
            color = bullet.bar['ranges'].fixedRange[index].fill
          }
          result.push({ ...originalItems[0], color, name, value })
        })
        const dynamicTooltipValue = chart.data.data.find(
          d => d.field === originalItems[0]['title']
        )?.dynamicTooltipValue
        if (dynamicTooltipValue.length > 0) {
          dynamicTooltipValue.forEach(dy => {
            const q = tooltipAttr.seriesTooltipFormatter.filter(i => i.id === dy.fieldId)
            if (q && q.length > 0) {
              const value = valueFormatter(parseFloat(dy.value as string), q[0].formatterCfg)
              const name = isEmpty(q[0].chartShowName) ? q[0].name : q[0].chartShowName
              result.push({ color: 'grey', name, value })
            }
          })
        }
        result.sort((a, b) => (a.color === 'grey' ? 1 : b.color === 'grey' ? -1 : 0))
        return result
      },
      container: getTooltipContainer(`tooltip-${chart.id}`),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
    return { ...options, tooltip }
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    chart.customAttr.label.position = 'middle'
    chart.customStyle.yAxis.splitLine.show = false
    return super.setupDefaultOptions(chart)
  }

  protected setupOptions(chart: Chart, options: BulletOptions): BulletOptions {
    return flow(
      this.configTheme,
      this.configBasicStyle,
      this.configMisc,
      this.configXAxis,
      this.configYAxis,
      this.configLabel,
      this.configLegend,
      this.configTooltip
    )(chart, options, {}, this)
  }
}

/**
 * 组装子弹图数据
 * @param chart
 */
function mergeBulletData(chart): any[] {
  // 先根据维度分组，再根据指标字段组装成子弹图的格式
  const groupedData = chart.data.data.reduce((acc, item) => {
    const field = item.field
    if (!acc[field]) {
      acc[field] = []
    }
    acc[field].push(item)
    return acc
  }, {})
  const result = []
  // 组装子弹图数据，每个维度对应一个子弹图
  Object.keys(groupedData).forEach(field => {
    const items = groupedData[field]
    // 初始化子弹图条目结构
    const entry = {
      title: field,
      ranges: [],
      measures: [],
      target: [],
      dimensionList: items[0].dimensionList,
      quotaList: []
    }

    // 防止指标相同时无数据有可能会导致数据不一致
    items.forEach(item => {
      const quotaId = item.quotaList[0]?.id
      const v = item.value || 0
      if (quotaId === chart.yAxis[0]?.id) {
        entry.measures.push(v)
      }
      if (quotaId === chart.yAxisExt[0]?.id) {
        entry.target.push(v)
      }
      if (quotaId === chart.extBubble[0]?.id) {
        entry.ranges.push(v)
      }
      entry.quotaList.push(item.quotaList[0])
    })
    // 对数据进行累加
    const ranges = chart.extBubble[0]?.id
      ? [].concat(entry.ranges?.reduce((acc, curr) => acc + curr, 0))
      : []
    const target = [].concat(entry.target?.reduce((acc, curr) => acc + curr, 0))
    const measures = [].concat(entry.measures?.reduce((acc, curr) => acc + curr, 0))
    const bulletData = {
      ...entry,
      measures: measures,
      target: target,
      ranges: ranges,
      quotaList: [...entry.quotaList],
      minRanges: ranges,
      originalRanges: ranges,
      originalTarget: target
    }
    result.push(bulletData)
  })
  return result
}