import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import { cloneDeep, defaults, defaultTo, isEmpty, map } from 'lodash-es'
import {
  configAxisLabelLengthLimit,
  configPlotTooltipEvent,
  configRoundAngle,
  getPadding,
  getTooltipContainer,
  getTooltipItemConditionColor,
  getYAxis,
  getYAxisExt,
  setGradientColor,
  TOOLTIP_TPL
} from '@/views/chart/components/js/panel/common/common_antv'
import type {
  BidirectionalBar as G2BidirectionalBar,
  BidirectionalBarOptions
} from '@antv/g2plot/esm/plots/bidirectional-bar'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { useI18n } from '@/hooks/web/useI18n'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import type { Options } from '@antv/g2plot/esm'
import { Group } from '@antv/g-canvas'

const { t } = useI18n()
/**
 * 对称柱状图
 */

export class BidirectionalHorizontalBar extends G2PlotChartView<
  BidirectionalBarOptions,
  G2BidirectionalBar
> {
  axisConfig = {
    ...this['axisConfig'],
    xAxis: {
      name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
      type: 'd',
      limit: 1
    },
    yAxis: {
      name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
      type: 'q',
      limit: 1
    },
    yAxisExt: {
      name: `${t('chart.drag_block_value_axis_ext')} / ${t('chart.quota')}`,
      type: 'q',
      limit: 1
    }
  }
  axis: AxisType[] = ['xAxis', 'yAxis', 'yAxisExt', 'filter', 'drill', 'extLabel', 'extTooltip']
  properties: EditorProperty[] = [
    'background-overall-component',
    'border-style',
    'basic-style-selector',
    'x-axis-selector',
    'dual-y-axis-selector',
    'title-selector',
    'legend-selector',
    'label-selector',
    'tooltip-selector',
    'function-cfg',
    'jump-set',
    'linkage',
    'threshold'
  ]
  propertyInner = {
    'background-overall-component': ['all'],
    'border-style': ['all'],
    'basic-style-selector': ['colors', 'alpha', 'gradient', 'layout', 'radiusColumnBar'],
    'x-axis-selector': ['position', 'axisLabel', 'axisLine', 'splitLine'],
    'dual-y-axis-selector': [
      'name',
      'position',
      'color',
      'fontSize',
      'axisLabel',
      'axisLine',
      'splitLine',
      'axisValue',
      'axisLabelFormatter'
    ],
    'title-selector': [
      'title',
      'fontSize',
      'color',
      'hPosition',
      'isItalic',
      'isBolder',
      'remarkShow',
      'fontFamily',
      'letterSpace',
      'fontShadow'
    ],
    'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
    'function-cfg': ['emptyDataStrategy'],
    'label-selector': ['hPosition', 'vPosition', 'seriesLabelFormatter'],
    'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
    threshold: ['lineThreshold']
  }

  selectorSpec: EditorSelectorSpec = {
    ...this['selectorSpec'],
    'dual-y-axis-selector': {
      title: `${t('chart.xAxis')}`
    },
    'x-axis-selector': {
      title: `${t('chart.yAxis')}`
    }
  }

  async drawChart(drawOptions: G2PlotDrawOptions<G2BidirectionalBar>): Promise<G2BidirectionalBar> {
    const { chart, container, action } = drawOptions
    if (!chart.data?.data?.length) {
      return
    }
    // data
    const data = cloneDeep(chart.data.data)
    const data1 = defaultTo(data[0]?.data, [])
    const data2 = map(defaultTo(data[1]?.data, []), d => {
      return {
        ...d,
        category: d.field,
        value: data1.find(item => item.field === d.field)?.value,
        valueExt: d.value
      }
    })
    // options
    const initOptions: BidirectionalBarOptions = {
      xField: 'field',
      data: data2,
      xAxis: {
        label: {
          style: {}
        },
        position: 'bottom'
      },
      yField: ['value', 'valueExt'],
      appendPadding: getPadding(chart),
      meta: {
        field: {
          type: 'cat'
        }
      }
    }
    const customOptions = this.setupOptions(chart, initOptions)
    const options = {
      ...customOptions
    }
    const xAxis = chart.xAxis
    if (xAxis?.length === 1 && xAxis[0].deType === 1) {
      const values = data2.map(item => item.field)
      options.meta = {
        field: {
          type: 'cat',
          values: values.reverse()
        }
      }
    }
    const { BidirectionalBar: BidirectionalBarClass } = await import(
      '@antv/g2plot/esm/plots/bidirectional-bar'
    )
    // 开始渲染
    const newChart = new BidirectionalBarClass(container, options)

    newChart.on('interval:click', action)
    newChart.on('element:click', ev => {
      const sourceData = newChart.options.data.filter(
        item =>
          item.field === ev.data.data.field &&
          item[ev.data.data['series-field-key']] === ev.data.data[ev.data.data['series-field-key']]
      )
      ev.data.data = {
        ...ev.data.data,
        ...sourceData[0]
      }
    })
    configPlotTooltipEvent(chart, newChart)
    configAxisLabelLengthLimit(chart, newChart)
    return newChart
  }

  protected configBasicStyle(
    chart: Chart,
    options: BidirectionalBarOptions
  ): BidirectionalBarOptions {
    const basicStyle = parseJson(chart.customAttr).basicStyle
    if (basicStyle.gradient) {
      const color = basicStyle.colors?.map((ele, index) => {
        const tmp = hexColorToRGBA(ele, basicStyle.alpha)
        let angle = 180 - index * 180
        // 垂直固定角度
        if (basicStyle.layout === 'vertical') {
          if (index === 0) {
            angle = 280
          }
          if (index === 1) {
            angle = 90
          }
        }
        return setGradientColor(tmp, true, angle)
      })
      options = {
        ...options,
        color
      }
    }
    options = {
      ...options,
      layout: basicStyle.layout
    }
    options = {
      ...options,
      ...configRoundAngle(chart, 'barStyle')
    }
    return options
  }

  protected configXAxis(chart: Chart, options: BidirectionalBarOptions): BidirectionalBarOptions {
    const tmpOptions = super.configXAxis(chart, options)
    if (!tmpOptions.xAxis) {
      return tmpOptions
    }
    if (tmpOptions.xAxis.label) {
      delete tmpOptions.xAxis.label.style.textAlign
      const { lengthLimit } = parseJson(chart.customStyle).xAxis.axisLabel
      defaults(tmpOptions.xAxis.label, {
        formatter: value => {
          return value?.length > lengthLimit ? value.substring(0, lengthLimit) + '...' : value
        }
      })
    }
    return tmpOptions
  }

  protected configTooltip(chart: Chart, options: BidirectionalBarOptions): BidirectionalBarOptions {
    const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
    const tooltipAttr = customAttr.tooltip
    if (!tooltipAttr.show) {
      return {
        ...options,
        tooltip: false
      }
    }
    const yAxis = cloneDeep(chart.yAxis)
    const yAxisExt = cloneDeep(chart.yAxisExt)
    const formatterMap = tooltipAttr.seriesTooltipFormatter
      ?.filter(i => i.show)
      .reduce((pre, next) => {
        pre[next.seriesId] = next
        return pre
      }, {}) as Record<string, SeriesFormatter>
    const optionsData = cloneDeep(options.data)
    const yaxisObj = item => {
      const param = item.data
      let yaxis = yAxis[0]
      let axisType = 'yAxis'
      if (param['series-field-key'] === 'valueExt') {
        yaxis = yAxisExt[0]
        axisType = 'yAxisExt'
      }
      return {
        id: yaxis.id,
        name: yaxis.name,
        axisType: axisType,
        value: param[param['series-field-key']]
      }
    }
    const tooltip: BidirectionalBarOptions['tooltip'] = {
      shared: true,
      showTitle: true,
      customItems(originalItems) {
        if (!tooltipAttr.seriesTooltipFormatter?.length) {
          return originalItems
        }
        const result = []
        originalItems
          .filter(item => {
            const obj = yaxisObj(item)
            return formatterMap[obj.id + '-' + obj.axisType]
          })
          .forEach(item => {
            const obj = yaxisObj(item)
            const formatter = formatterMap[obj.id + '-' + obj.axisType]
            const value = valueFormatter(parseFloat(item.value as string), formatter.formatterCfg)
            const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
            const color = getTooltipItemConditionColor(item)
            result.push({ ...item, name, value, color })
          })
        const dynamicTooltipValue = optionsData.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 })
            }
          })
        }
        return result
      },
      container: getTooltipContainer(`tooltip-${chart.id}`),
      itemTpl: TOOLTIP_TPL,
      enterable: true
    }
    return {
      ...options,
      tooltip
    }
  }

  protected configLegend(chart: Chart, options: BidirectionalBarOptions): BidirectionalBarOptions {
    const o = super.configLegend(chart, options)
    if (o.legend) {
      o.legend.itemName.formatter = (_text: string, _item: any, index: number) => {
        const yaxis = chart.yAxis[0]
        const yaxisExt = chart.yAxisExt[0]
        if (index === 0) {
          return yaxis.chartShowName ? yaxis.chartShowName : yaxis.name
        }
        return yaxisExt.chartShowName ? yaxisExt.chartShowName : yaxisExt.name
      }
    }
    return o
  }

  protected configYAxis(chart: Chart, options: BidirectionalBarOptions): BidirectionalBarOptions {
    const yAxis = getYAxis(chart)
    let yAxisExt = getYAxisExt(chart)

    const tempOption = {
      ...options
    }

    if (!yAxis) {
      //左右轴都要隐藏
      yAxisExt = false
      tempOption['yAxis'] = {
        value: false,
        valueExt: false
      }
    } else {
      tempOption['yAxis'] = {
        value: undefined,
        valueExt: undefined
      }
    }
    const layoutHorizontal = options.layout === 'horizontal'
    // 处理横轴标题方向不对
    if (yAxis && yAxis['title'] && layoutHorizontal) {
      yAxis['title'].autoRotate = false
    }
    const yAxisTmp = parseJson(chart.customStyle).yAxis
    if (yAxis['label']) {
      yAxis['label'].formatter = value => {
        return valueFormatter(value, yAxisTmp.axisLabelFormatter)
      }
    }
    const axisValue = yAxisTmp.axisValue
    if (!axisValue?.auto) {
      tempOption.yAxis.value = {
        ...yAxis,
        min: axisValue.min,
        max: axisValue.max,
        minLimit: axisValue.min,
        maxLimit: axisValue.max,
        tickCount: axisValue.splitCount
      }
    } else {
      tempOption.yAxis.value = yAxis
    }

    const yAxisExtTmp = parseJson(chart.customStyle).yAxisExt
    if (yAxisExt['label']) {
      yAxisExt['label'].formatter = value => {
        return valueFormatter(value, yAxisExtTmp.axisLabelFormatter)
      }
    }
    const axisExtValue = yAxisExtTmp.axisValue
    if (!axisExtValue?.auto) {
      tempOption.yAxis.valueExt = {
        ...yAxisExt,
        min: axisExtValue.min,
        max: axisExtValue.max,
        minLimit: axisExtValue.min,
        maxLimit: axisExtValue.max,
        tickCount: axisExtValue.splitCount
      }
    } else {
      tempOption.yAxis.valueExt = yAxisExt
    }

    return tempOption
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    chart.customStyle.yAxis = {
      ...chart.customStyle.yAxis,
      position: 'left'
    }
    chart.customStyle.yAxisExt = {
      ...chart.customStyle.yAxisExt,
      position: 'left',
      splitLine: chart.customStyle.yAxis.splitLine
    }
    chart.customAttr.label = {
      ...chart.customAttr.label,
      position: 'right'
    }
    chart.customAttr.basicStyle.layout = 'horizontal'
    return chart
  }

  protected configLabel(chart: Chart, options: BidirectionalBarOptions): BidirectionalBarOptions {
    let label
    const yAxis = chart.yAxis
    const yAxisExt = chart.yAxisExt
    const labelAttr = parseJson(chart.customAttr).label
    const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => {
      pre[next.id] = next
      return pre
    }, {})
    let customAttr: DeepPartial<ChartAttr>
    const layoutHorizontal = options.layout === 'horizontal'
    if (chart.customAttr) {
      customAttr = parseJson(chart.customAttr)
      // label
      if (customAttr.label) {
        const l = customAttr.label
        if (l.show) {
          const layout = []
          if (!labelAttr.fullDisplay) {
            const tmpOptions = super.configLabel(chart, options)
            layout.push(...tmpOptions.label.layout)
          }
          label = {
            position: l.position,
            layout,
            style: {
              fill: l.color,
              fontSize: l.fontSize,
              fontFamily: chart.fontFamily
            },
            formatter: param => {
              let yaxis = yAxis[0]
              let res = param.value
              if (param['series-field-key'] === 'valueExt') {
                yaxis = yAxisExt[0]
              }
              const value = param[param['series-field-key']]
              const labelCfg = formatterMap?.[yaxis.id] as SeriesFormatter
              if (yaxis.formatterCfg) {
                res = valueFormatter(value, yaxis.formatterCfg)
              }
              if (!labelCfg) {
                return res
              }
              if (!labelCfg.show) {
                return
              }
              if (labelCfg) {
                res = valueFormatter(value, labelCfg.formatterCfg)
              } else {
                res = valueFormatter(value, l.labelFormatter)
              }
              const group = new Group({})
              const isValue = param['series-field-key'] === 'value'
              const textAlign = isValue && layoutHorizontal ? 'end' : 'start'
              const isMiddle = label.position === 'middle'
              group.addShape({
                type: 'text',
                attrs: {
                  x:
                    isValue && layoutHorizontal && !isMiddle
                      ? -6
                      : !isValue && layoutHorizontal && !isMiddle
                      ? 6
                      : 0,
                  y:
                    isValue && !layoutHorizontal && !isMiddle
                      ? -8
                      : !isValue && !layoutHorizontal && !isMiddle
                      ? 8
                      : 0,
                  text: res,
                  textAlign: label.position === 'middle' ? 'start' : textAlign,
                  textBaseline: 'top',
                  fontSize: labelCfg.fontSize,
                  fontFamily: chart.fontFamily,
                  fill: labelCfg.color
                }
              })
              return group
            }
          }
        } else {
          label = false
        }
      }
    }
    if (!layoutHorizontal) {
      if (label.position === 'left') {
        label.position = 'bottom'
      }
      if (label.position === 'right') {
        label.position = 'top'
      }
    }
    return { ...options, label }
  }

  protected configEmptyDataStrategy(
    chart: Chart,
    options: BidirectionalBarOptions
  ): BidirectionalBarOptions {
    const { data } = options as unknown as Options
    if (!data?.length) {
      return options
    }
    const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy
    if (strategy === 'ignoreData') {
      const emptyFields = data
        .filter(obj => obj['value'] === null || obj['valueExt'] === null)
        .map(obj => obj['field'])
      return {
        ...options,
        data: data.filter(obj => {
          if (emptyFields.includes(obj['field'])) {
            return false
          }
          return true
        })
      }
    }
    const updateValues = (strategy: 'breakLine' | 'setZero', data: any[]) => {
      data.forEach(obj => {
        if (obj['value'] === null) {
          obj['value'] = strategy === 'breakLine' ? null : 0
        }
        if (obj['valueExt'] === null) {
          obj['valueExt'] = strategy === 'breakLine' ? null : 0
        }
      })
    }
    if (strategy === 'breakLine' || strategy === 'setZero') {
      updateValues(strategy, data)
    }
    return options
  }

  protected setupOptions(chart: Chart, options: BidirectionalBarOptions) {
    return flow(
      this.addConditionsStyleColorToData,
      this.configTheme,
      this.configBasicStyle,
      this.configLabel,
      this.configTooltip,
      this.configLegend,
      this.configXAxis,
      this.configYAxis,
      this.configAnalyse,
      this.configSlider,
      this.configEmptyDataStrategy,
      this.configBarConditions
    )(chart, options)
  }

  constructor() {
    super('bidirectional-bar', [])
  }
}