import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Heatmap, HeatmapOptions } from '@antv/g2plot/esm/plots/heatmap'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { useI18n } from '@/hooks/web/useI18n'
import { deepCopy } from '@/utils/utils'
import { cloneDeep } from 'lodash-es'
import {
  configAxisLabelLengthLimit,
  getPadding,
  getXAxis,
  getYAxis
} from '@/views/chart/components/js/panel/common/common_antv'
import { valueFormatter } from '@/views/chart/components/js/formatter'

const { t } = useI18n()
const DEFAULT_DATA = []
/**
 * 热力图
 */
export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
  properties: EditorProperty[] = [
    'basic-style-selector',
    'background-overall-component',
    'label-selector',
    'legend-selector',
    'x-axis-selector',
    'y-axis-selector',
    'title-selector',
    'tooltip-selector',
    'jump-set',
    'linkage',
    'border-style'
  ]
  propertyInner: EditorPropertyInner = {
    'background-overall-component': ['all'],
    'basic-style-selector': ['colors'],
    'label-selector': ['fontSize', 'color', 'labelFormatter'],
    'x-axis-selector': ['name', 'color', 'fontSize', 'position', 'axisLabel', 'axisLine'],
    'y-axis-selector': [
      'name',
      'color',
      'fontSize',
      'position',
      'axisLabel',
      'axisLine',
      'showLengthLimit'
    ],
    'title-selector': [
      'title',
      'fontSize',
      'color',
      'hPosition',
      'isItalic',
      'isBolder',
      'remarkShow',
      'fontFamily',
      'letterSpace',
      'fontShadow'
    ],
    'legend-selector': ['orient', 'color', 'fontSize', 'hPosition', 'vPosition'],
    'tooltip-selector': ['show', 'color', 'fontSize', 'backgroundColor', 'tooltipFormatter'],
    'border-style': ['all']
  }
  axis: AxisType[] = ['xAxis', 'xAxisExt', 'extColor', 'filter']
  axisConfig: AxisConfig = {
    xAxis: {
      name: `${t('chart.x_axis')} / ${t('chart.dimension')}`,
      type: 'd',
      limit: 1
    },
    xAxisExt: {
      name: `${t('chart.y_axis')} / ${t('chart.dimension')}`,
      type: 'd',
      limit: 1
    },
    extColor: {
      name: `${t('chart.color')} / ${t('chart.dimension_or_quota')}`,
      limit: 1
    }
  }
  protected getDefaultLength = (chart, l) => {
    const containerDom = document.getElementById(chart.container)
    const containerHeight = containerDom?.clientHeight || 100
    const containerWidth = containerDom?.clientWidth || 100
    let defaultLength = containerHeight - containerHeight * 0.5
    if (l.orient !== 'vertical') {
      defaultLength = containerWidth - containerWidth * 0.5
    }
    return defaultLength
  }
  protected sortData = (fieldObj, data) => {
    const { deType, sort, customSort } = fieldObj

    if (sort === 'desc') {
      if (deType === 0) {
        return data.sort().reverse()
      } else {
        return data.sort((a, b) => b - a)
      }
    } else if (sort === 'asc') {
      if (deType === 0) {
        return data.sort()
      } else {
        return data.sort((a, b) => a - b)
      }
    }

    // 如果没有指定排序方式，直接返回原始数据或 customSort
    return customSort && customSort.length > 0 ? customSort : data
  }
  async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
    const { chart, container, action } = drawOptions
    const xAxis = deepCopy(chart.xAxis)
    const xAxisExt = deepCopy(chart.xAxisExt)
    const extColor = deepCopy(chart.extColor)
    if (!xAxis?.length || !xAxisExt?.length || !extColor?.length) {
      return
    }
    const xField = xAxis[0].dataeaseName
    const xFieldExt = xAxisExt[0].dataeaseName
    const extColorField = extColor[0].dataeaseName
    // data
    const tmpData = cloneDeep(chart.data.tableRow)
    const data =
      tmpData?.filter(cell => cell[xField] && cell[xFieldExt] && cell[extColorField]) || []
    data?.forEach(i => {
      Object.keys(i).forEach(key => {
        if (key === '*') {
          i['@'] = i[key]
        }
      })
    })

    // options
    const initOptions: HeatmapOptions = {
      data: data,
      xField: xField,
      yField: xFieldExt,
      colorField: extColorField === '*' ? '@' : extColorField,
      appendPadding: getPadding(chart),
      meta: {
        [xField]: {
          type: 'cat',
          values: this.sortData(xAxis[0], [...new Set(data.map(i => i[[xField]]))])
        },
        [xFieldExt]: {
          type: 'cat',
          values: this.sortData(xAxisExt[0], [...new Set(data.map(i => i[[xFieldExt]]))]).reverse()
        }
      },
      legend: {
        layout: 'vertical',
        position: 'right',
        slidable: true,
        label: {
          align: 'left',
          spacing: 10
        }
      }
    }
    chart.container = container
    const options = this.setupOptions(chart, initOptions)
    const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
    const newChart = new Heatmap(container, options)
    newChart.on('plot:click', param => {
      if (!param.data?.data) {
        return
      }
      const pointData = param.data.data
      const dimensionList = []
      chart.data.fields.forEach(item => {
        Object.keys(pointData).forEach(key => {
          if (key.startsWith('f_') && item.dataeaseName === key) {
            dimensionList.push({
              id: item.id,
              dataeaseName: item.dataeaseName,
              value: pointData[key]
            })
          }
        })
      })
      action({
        x: param.data.x,
        y: param.data.y,
        data: {
          data: {
            ...param.data.data,
            value: dimensionList[1].value,
            name: dimensionList[1].id,
            dimensionList: dimensionList,
            quotaList: [dimensionList[1]]
          }
        }
      })
    })
    newChart.on('afterrender', ev => {
      const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
      if (l.show) {
        const rail = ev.view.getController('legend').option[extColor[0].dataeaseName]?.['rail']
        if (rail) {
          rail.defaultLength = this.getDefaultLength(chart, l)
        }
      }
    })
    configAxisLabelLengthLimit(chart, newChart)
    return newChart
  }

  protected configTheme(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const tmp = super.configTheme(chart, options)
    tmp.theme.innerLabels.offset = 0
    return tmp
  }

  protected configBasicStyle(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const basicStyle = parseJson(chart.customAttr).basicStyle
    const color = basicStyle.colors?.map(ele => {
      return hexColorToRGBA(ele, basicStyle.alpha)
    })
    return {
      ...options,
      color
    }
  }
  protected configTooltip(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    let tooltip
    let customAttr: DeepPartial<ChartAttr>
    if (chart.customAttr) {
      customAttr = parseJson(chart.customAttr)
      // tooltip
      if (customAttr.tooltip) {
        const extColor = deepCopy(chart.extColor)
        const xAxisExt = deepCopy(chart.xAxisExt)
        const tooltipFiledList = [xAxisExt, extColor]
        const t = JSON.parse(JSON.stringify(customAttr.tooltip))
        if (t.show) {
          tooltip = {
            showTitle: true,
            customItems(originalItems) {
              const items = []
              const createItem = (fieldObj, items, originalItems) => {
                const name = fieldObj?.chartShowName ? fieldObj?.chartShowName : fieldObj?.name
                let value = originalItems[0].data[fieldObj.dataeaseName]
                if (!isNaN(Number(value))) {
                  value = valueFormatter(value, customAttr.tooltip.tooltipFormatter)
                }
                items.push({
                  ...originalItems[0],
                  name: name,
                  value: value
                })
              }
              tooltipFiledList.forEach(field => {
                createItem(field[0], items, originalItems)
              })
              return items
            }
          }
        } else {
          tooltip = false
        }
      }
    }
    return {
      ...options,
      tooltip
    }
  }

  protected configXAxis(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const xAxis = getXAxis(chart)
    return {
      ...options,
      xAxis: xAxis ? { ...xAxis, grid: null } : false
    }
  }

  protected configYAxis(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const yAxis = getYAxis(chart)
    return {
      ...options,
      yAxis: yAxis ? { ...yAxis, grid: null } : false
    }
  }

  protected configLegend(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const tmpOptions = super.configLegend(chart, options)
    if (tmpOptions.legend) {
      const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
      tmpOptions.legend.slidable = true
      tmpOptions.legend.minHeight = 10
      tmpOptions.legend.minWidth = 10
      tmpOptions.legend.maxHeight = 600
      tmpOptions.legend.maxWidth = 600
      const containerDom = document.getElementById(chart.container)
      const containerHeight = containerDom?.clientHeight || 100
      const containerWidth = containerDom?.clientWidth || 100
      let defaultLength = containerHeight - containerHeight * 0.5
      if (l.orient === 'vertical') {
        tmpOptions.legend.offsetY = -5
      } else {
        defaultLength = containerWidth - containerWidth * 0.5
      }
      tmpOptions.legend.rail = { defaultLength: defaultLength }
      tmpOptions.legend.label = {
        spacing: 10,
        style: {
          fill: l.color,
          fontSize: l.fontSize
        }
      }
    }
    return tmpOptions
  }

  setupDefaultOptions(chart: ChartObj): ChartObj {
    chart.customStyle.legend.orient = 'vertical'
    chart.customStyle.legend.vPosition = 'center'
    chart.customStyle.legend.hPosition = 'right'
    chart.customStyle.legend['rail'] = { defaultLength: 100 }
    return chart
  }

  protected configLabel(chart: Chart, options: HeatmapOptions): HeatmapOptions {
    const tmpOptions = super.configLabel(chart, options)
    if (tmpOptions.label) {
      const extColor = deepCopy(chart.extColor)
      const { label: labelAttr } = parseJson(chart.customAttr)
      const layout = []
      if (!tmpOptions.label.fullDisplay) {
        layout.push(...tmpOptions.label.layout)
      }
      const label = {
        ...tmpOptions.label,
        position: 'middle',
        layout,
        formatter: data => {
          const value = data[extColor[0]?.dataeaseName]
          if (!isNaN(Number(value))) {
            return valueFormatter(value, labelAttr.labelFormatter)
          }
          return value
        }
      }
      return {
        ...tmpOptions,
        label
      }
    }
    return tmpOptions
  }

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

  constructor() {
    super('t-heatmap', DEFAULT_DATA)
  }
}