import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Sankey, SankeyOptions } from '@antv/g2plot/esm/plots/sankey'
import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv'
import { cloneDeep, get } from 'lodash-es'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { valueFormatter } from '@/views/chart/components/js/formatter'

import { Datum } from '@antv/g2plot/esm/types/common'
import { useI18n } from '@/hooks/web/useI18n'
import {
  SANKEY_AXIS_TYPE,
  SANKEY_EDITOR_PROPERTY,
  SANKEY_EDITOR_PROPERTY_INNER
} from '@/views/chart/components/js/panel/charts/others/sankey-common'

const { t } = useI18n()
const DEFAULT_DATA = []

/**
 * 桑基图
 */
export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
  axisConfig = {
    xAxis: {
      name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
      limit: 1,
      type: 'd'
    },
    xAxisExt: {
      name: `${t('chart.drag_block_type_axis_end')} / ${t('chart.dimension')}`,
      limit: 1,
      type: 'd',
      allowEmpty: true
    },
    yAxis: {
      name: `${t('chart.chart_data')} / ${t('chart.quota')}`,
      limit: 1,
      type: 'q'
    }
  }
  properties = SANKEY_EDITOR_PROPERTY
  propertyInner = {
    ...SANKEY_EDITOR_PROPERTY_INNER,
    'label-selector': ['color', 'fontSize'],
    'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show']
  }
  axis: AxisType[] = [...SANKEY_AXIS_TYPE]
  protected baseOptions: SankeyOptions = {
    data: [],
    sourceField: 'source',
    targetField: 'target',
    weightField: 'value',
    rawFields: ['dimensionList', 'quotaList'],
    interactions: [
      {
        type: 'legend-active',
        cfg: {
          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
        }
      },
      {
        type: 'legend-filter',
        cfg: {
          start: [
            {
              trigger: 'legend-item:click',
              action: [
                'list-unchecked:toggle',
                'data-filter:filter',
                'element-active:reset',
                'element-highlight:reset'
              ]
            }
          ]
        }
      },
      {
        type: 'tooltip',
        cfg: {
          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
        }
      },
      {
        type: 'active-region',
        cfg: {
          start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
          end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
        }
      }
    ]
  }

  async drawChart(drawOptions: G2PlotDrawOptions<Sankey>): Promise<Sankey> {
    const { chart, container, action } = drawOptions
    if (!chart.data?.data?.length) {
      return
    }
    // data
    const data: Array<any> = cloneDeep(chart.data.data)

    data.forEach(d => {
      if (d.dimensionList) {
        if (d.dimensionList[0]) {
          d.source = d.dimensionList[0].value
        }
        if (d.dimensionList[1]) {
          d.target = d.dimensionList[1].value
        }
      }
    })

    // options
    const initOptions: SankeyOptions = {
      ...this.baseOptions,
      appendPadding: getPadding(chart),
      data,
      nodeSort: (a, b) => {
        // 这里是前端自己排序
        if (chart.yAxis && chart.yAxis[0]) {
          if (chart.yAxis[0].sort === 'asc') {
            return a.value - b.value
          } else if (chart.yAxis[0].sort === 'desc') {
            return b.value - a.value
          }
        }

        if (chart.xAxis && chart.xAxis[0] && a.sourceLinks.length > 0) {
          if (chart.xAxis[0].sort === 'custom_sort' && chart.xAxis[0].customSort) {
            return (
              chart.xAxis[0].customSort.indexOf(a.name) - chart.xAxis[0].customSort.indexOf(b.name)
            )
          } else if (chart.xAxis[0].sort === 'asc') {
            return a.name.localeCompare(b.name)
          } else if (chart.xAxis[0].sort === 'desc') {
            return b.name.localeCompare(a.name)
          }
        }
        if (chart.xAxisExt && chart.xAxisExt[0] && a.targetLinks.length > 0) {
          if (chart.xAxisExt[0].sort === 'custom_sort' && chart.xAxisExt[0].customSort) {
            return (
              chart.xAxisExt[0].customSort.indexOf(a.name) -
              chart.xAxisExt[0].customSort.indexOf(b.name)
            )
          } else if (chart.xAxisExt[0].sort === 'asc') {
            return a.name.localeCompare(b.name)
          } else if (chart.xAxisExt[0].sort === 'desc') {
            return b.name.localeCompare(a.name)
          }
        }

        return b.value - a.value
      }
    }

    const options = this.setupOptions(chart, initOptions)
    const { Sankey } = await import('@antv/g2plot/esm/plots/sankey')
    // 开始渲染
    const newChart = new Sankey(container, options)

    newChart.on('edge:click', action)

    return newChart
  }

  protected configTooltip(chart: Chart, options: SankeyOptions): SankeyOptions {
    let tooltip
    let customAttr: DeepPartial<ChartAttr>
    if (chart.customAttr) {
      customAttr = parseJson(chart.customAttr)
      // tooltip
      if (customAttr.tooltip) {
        const t = JSON.parse(JSON.stringify(customAttr.tooltip))
        if (t.show) {
          // 计算每个source节点的总出
          const outTotal = {}
          if (Array.isArray(options.data)) {
            options.data?.forEach(d => {
              outTotal[d.source] = (outTotal[d.source] || 0) + d.value
            })
          }
          tooltip = {
            showTitle: false,
            showMarkers: false,
            shared: false,
            // 内置：node 不显示 tooltip，edge 显示 tooltip
            showContent: items => {
              return !get(items, [0, 'data', 'isNode'])
            },
            formatter: (datum: Datum) => {
              const { source, target, value } = datum
              // 总出占比
              if (t.tooltipFormatter.showTotalPercent) {
                const { decimalCount = 2 } = t.tooltipFormatter
                const ratioStr = ((value / outTotal[source]) * 100).toFixed(decimalCount) + '%'
                return {
                  name: `${source} -> ${target}`,
                  value: valueFormatter(value, t.tooltipFormatter) + ` (${ratioStr})`
                }
              }
              return {
                name: source + ' -> ' + target,
                value: valueFormatter(value, t.tooltipFormatter)
              }
            }
          }
        } else {
          tooltip = false
        }
      }
    }
    return { ...options, tooltip }
  }

  protected configBasicStyle(chart: Chart, options: SankeyOptions): SankeyOptions {
    const basicStyle = parseJson(chart.customAttr).basicStyle

    let color = basicStyle.colors
    color = color.map(ele => {
      const tmp = hexColorToRGBA(ele, basicStyle.alpha)
      if (basicStyle.gradient) {
        return setGradientColor(tmp, true)
      } else {
        return tmp
      }
    })

    options = {
      ...options,
      color
    }
    return options
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    const { customAttr, senior } = chart
    const { label } = customAttr
    if (!['left', 'middle', 'right'].includes(label.position)) {
      label.position = 'middle'
    }
    senior.functionCfg.emptyDataStrategy = 'ignoreData'
    return chart
  }

  protected configLabel(chart: Chart, options: SankeyOptions): SankeyOptions {
    const labelAttr = parseJson(chart.customAttr).label
    if (labelAttr.show) {
      const layout = []
      if (!labelAttr.fullDisplay) {
        layout.push(...[{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }])
      }
      const label = {
        //...tmpOptions.label,
        formatter: ({ name }) => name,
        callback: (x: number[]) => {
          const isLast = x[1] === 1 // 最后一列靠边的节点
          return {
            style: {
              fill: labelAttr.color,
              fontSize: labelAttr.fontSize,
              textAlign: isLast ? 'end' : 'start',
              fontFamily: chart.fontFamily
            },
            offsetX: isLast ? -8 : 8
          }
        },
        layout
      }
      return {
        ...options,
        label
      }
    } else {
      return {
        ...options,
        label: false
      }
    }
  }

  protected setupOptions(chart: Chart, options: SankeyOptions): SankeyOptions {
    return flow(
      this.configTheme,
      this.configBasicStyle,
      this.configLabel,
      this.configTooltip,
      this.configLegend,
      this.configSlider,
      this.configAnalyseHorizontal,
      this.configEmptyDataStrategy
    )(chart, options)
  }

  constructor(name = 'sankey') {
    super(name, DEFAULT_DATA)
  }
}