import {
  G2PlotChartView,
  G2PlotDrawOptions
} from '@/views/chart/components/js/panel/types/impl/g2plot'
import type { Mix, MixOptions } from '@antv/g2plot/esm/plots/mix'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { LINE_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/line/common'
import { useI18n } from '@/hooks/web/useI18n'
import { valueFormatter } from '@/views/chart/components/js/formatter'
import type { Options } from '@antv/g2plot/esm'
import { MixOptions } from '@antv/g2plot'

const { t } = useI18n()
const DEFAULT_DATA = []
/**
 * K线图
 */
export class StockLine extends G2PlotChartView<MixOptions, Mix> {
  properties: EditorProperty[] = [
    'background-overall-component',
    'border-style',
    'basic-style-selector',
    'legend-selector',
    'x-axis-selector',
    'y-axis-selector',
    'title-selector',
    'tooltip-selector',
    'function-cfg',
    'jump-set',
    'linkage'
  ]
  propertyInner = {
    ...LINE_EDITOR_PROPERTY_INNER,
    'function-cfg': ['emptyDataStrategy'],
    'y-axis-selector': [
      'name',
      'color',
      'fontSize',
      'position',
      'axisLabel',
      'axisLine',
      'splitLine',
      'axisLabelFormatter'
    ],
    'legend-selector': ['fontSize', 'color', 'show']
  }
  axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip']
  axisConfig = {
    xAxis: {
      name: `${t('common.component.date')} / ${t('chart.dimension')}`,
      limit: 1,
      type: 'd'
    },
    yAxis: {
      name: `${t('chart.k_line_yaxis_tip')} / ${t('chart.quota')}`,
      limit: 4,
      type: 'q'
    }
  }

  /**
   * 计算收盘价平均值
   * @param data
   * @param dayCount
   * @param chart
   */
  calculateMovingAverage = (data, dayCount, chart) => {
    const xAxis = chart.xAxis
    const yAxis = chart.yAxis
    // 时间字段
    const xAxisDataeaseName = xAxis[0].dataeaseName
    // 收盘价字段
    const yAxisDataeaseName = yAxis[1].dataeaseName
    const result = []
    for (let i = 0; i < data.length; i++) {
      if (i < dayCount) {
        result.push({
          [xAxisDataeaseName]: data[i][xAxisDataeaseName],
          value: null
        })
      } else {
        const sum = data
          .slice(i - dayCount + 1, i + 1)
          .reduce((sum, item) => sum + item[yAxisDataeaseName], 0)
        result.push({
          [xAxisDataeaseName]: data[i][xAxisDataeaseName],
          value: parseFloat((sum / dayCount).toFixed(3))
        })
      }
    }
    return result
  }

  /**
   * 获取数据集合中对象属性值的最大最小值
   * @param data
   */
  calculateMinMax = data => {
    return data.reduce(
      (acc, current) => {
        // 获取 current 对象的所有属性值
        const values = Object.values(current)
        // 过滤出数字值
        const numericValues: any[] = values.filter(value => typeof value === 'number')
        // 找到 current 对象的数字属性值中的最大值和最小值
        // 如果存在数字值，则计算当前对象的最大值和最小值
        if (numericValues.length > 0) {
          const currentMax = Math.max(...numericValues)
          const currentMin = Math.min(...numericValues)
          // 更新全局最大值和最小值
          acc.maxValue = Math.max(acc.maxValue, currentMax)
          acc.minValue = Math.min(acc.minValue, currentMin)
        }
        return acc
      },
      { maxValue: Number.NEGATIVE_INFINITY, minValue: Number.POSITIVE_INFINITY }
    )
  }

  /**
   * 注册图表事件
   * @param data
   * @param plot
   * @param averagesLineData
   */
  registerEvent = (data, plot, averagesLineData) => {
    // 监听图例点击事件，显示隐藏
    let risingVisible = true
    plot.on('legend-item:click', evt => {
      const { value } = evt.target.get('delegateObject').item
      if (value === 'k') {
        risingVisible = !risingVisible
        plot.chart.geometries.forEach(geom => {
          if (geom.type === 'schema') {
            geom.changeVisible(risingVisible)
          }
        })
      } else {
        const lines = plot.chart.geometries.filter(item => item.type === 'line')
        const points = plot.chart.geometries.filter(item => item.type === 'point')
        let lineIndex = 0
        for (const key of averagesLineData.keys()) {
          lineIndex++
          if (key === value) {
            lines[lineIndex - 1].changeVisible(!lines[lineIndex - 1].visible)
            points[lineIndex - 1].changeVisible(!points[lineIndex - 1].visible)
          }
        }
      }
    })
    // 监听图表渲染事件
    plot.on('afterrender', e => {
      let first = false
      if (plot.chart.options.slider.start === 0.5 && plot.chart.options.slider.end === 1) {
        first = true
      }
      if (e.view?.options?.scales) {
        const startIndex = Math.floor(0.5 * data.length)
        const endIndex = Math.ceil(1 * data.length)
        const filteredData = data.slice(startIndex, endIndex)
        const { maxValue, minValue } = this.calculateMinMax(
          first ? filteredData : e.view.filteredData
        )
        const a = e.view.options.scales
        Object.keys(a).forEach(item => {
          if (a[item].max) {
            a[item].max = maxValue
          }
          if (a[item].min) {
            a[item].min = minValue
          }
        })
      }
    })
    // 监听图例组点击事件，设置缩放
    plot.on('legend-item-group:click', e => {
      if (e.view?.options?.scales) {
        const { maxValue, minValue } = this.calculateMinMax(e.view.filteredData)
        const a = e.view.options.scales
        Object.keys(a).forEach(item => {
          if (a[item].max) {
            a[item].max = maxValue
          }
          if (a[item].min) {
            a[item].min = minValue
          }
        })
      }
    })
    // 监听滑块事件，设置缩放
    plot.on('slider:valuechanged', e => {
      const start = e.gEvent.currentTarget.cfg.component.cfg.start
      const end = e.gEvent.currentTarget.cfg.component.cfg.end
      plot.chart.options.slider.start = start
      plot.chart.options.slider.end = end
      const startIndex = Math.floor(start * data.length)
      const endIndex = Math.ceil(end * data.length)
      const filteredData = data.slice(startIndex, endIndex)
      const { maxValue, minValue } = this.calculateMinMax(filteredData)
      const a = e.view.options.scales
      Object.keys(a).forEach(item => {
        if (a[item].max) {
          a[item].max = maxValue
        }
        if (a[item].min) {
          a[item].min = minValue
        }
      })
    })
  }

  async drawChart(drawOptions: G2PlotDrawOptions<Mix>): Promise<Mix> {
    const { chart, action, container } = drawOptions
    if (!chart.data?.data?.length) {
      return
    }
    const xAxis = chart.xAxis
    const yAxis = chart.yAxis
    if (yAxis.length != 4) {
      return
    }
    const basicStyle = parseJson(chart.customAttr).basicStyle
    const colors = []
    const alpha = basicStyle.alpha
    basicStyle.colors.forEach(ele => {
      colors.push(hexColorToRGBA(ele, alpha))
    })
    const data = parseJson(chart.data?.tableRow)

    // 时间字段
    const xAxisDataeaseName = xAxis[0].dataeaseName
    const averages = [5, 10, 20, 60, 120, 180]
    const legendItems: any[] = [
      {
        name: '日K',
        value: 'k',
        marker: {
          symbol: (x, y, r) => {
            const width = r * 1
            const height = r
            return [
              // 矩形框
              ['M', x - width - 1 / 2, y - height / 2],
              ['L', x + width + 1 / 2, y - height / 2],
              ['L', x + width + 1 / 2, y + height / 2],
              ['L', x - width - 1 / 2, y + height / 2],
              ['Z'],
              // 中线
              ['M', x, y + 10 / 2],
              ['L', x, y - 10 / 2]
            ]
          },
          style: { fill: 'red', stroke: 'red', lineWidth: 2 }
        }
      }
    ]
    // 计算均线数据
    const averagesLineData = new Map()
    averages.forEach(item => {
      averagesLineData.set('ma' + item, this.calculateMovingAverage(data, item, chart))
    })

    // 将均线数据设置到主数据中
    data.forEach((item: any) => {
      const date = item[xAxisDataeaseName]
      for (const [key, value] of averagesLineData) {
        item[key] = value.find(m => m[xAxisDataeaseName] === date)?.value
      }
    })

    const averageLines: any[] = []
    let index = 0
    const start = 0.5
    const end = 1
    const startIndex = Math.floor(start * data.length)
    const endIndex = Math.ceil(end * data.length)
    const filteredData = data.slice(startIndex, endIndex)
    const { maxValue, minValue } = this.calculateMinMax(filteredData)
    for (const key of averagesLineData.keys()) {
      index++
      averageLines.push({
        type: 'line',
        top: true,
        options: {
          smooth: false,
          xField: xAxisDataeaseName,
          yField: key,
          color: colors[index - 1],
          xAxis: null,
          yAxis: {
            label: false,
            min: minValue,
            max: maxValue,
            grid: null,
            line: null
          },
          lineStyle: {
            lineWidth: 2
          }
        }
      })
      legendItems.push({
        name: key.toUpperCase(),
        value: key,
        marker: { symbol: 'hyphen', style: { stroke: colors[index - 1], lineWidth: 2 } }
      })
    }
    const axis = chart.xAxis ?? []
    let dateFormat: string
    const dateSplit = axis[0]?.datePattern === 'date_split' ? '/' : '-'
    switch (axis[0]?.dateStyle) {
      case 'y':
        dateFormat = 'YYYY'
        break
      case 'y_M':
        dateFormat = 'YYYY' + dateSplit + 'MM'
        break
      case 'y_M_d':
        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD'
        break
      // case 'H_m_s':
      //   dateFormat = 'HH:mm:ss'
      //   break
      case 'y_M_d_H':
        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH'
        break
      case 'y_M_d_H_m':
        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm'
        break
      case 'y_M_d_H_m_s':
        dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm:ss'
        break
      default:
        dateFormat = 'YYYY-MM-dd HH:mm:ss'
    }
    const option = this.setupOptions(chart, {
      data,
      slider: {
        start: 0.5,
        end: 1,
        textStyle: {
          fontFamily: chart.fontFamily
        }
      },
      plots: [
        {
          type: 'stock',
          top: true,

          options: {
            meta: {
              [xAxisDataeaseName]: {
                mask: dateFormat
              }
            },
            stockStyle: {
              stroke: 'black',
              lineWidth: 0.5
            },
            yAxis: {
              label: {},
              position: 'left',
              min: minValue,
              max: maxValue
            },
            xField: xAxisDataeaseName,
            yField: [
              yAxis[0].dataeaseName,
              yAxis[1].dataeaseName,
              yAxis[2].dataeaseName,
              yAxis[3].dataeaseName
            ],
            legend: {
              position: 'top',
              custom: true,
              items: legendItems
            }
          }
        },
        ...averageLines
      ]
    })
    const { Mix: MixClass } = await import('@antv/g2plot/esm/plots/mix')
    const plot = new MixClass(container, option)
    this.registerEvent(data, plot, averagesLineData)
    plot.on('schema:click', evt => {
      const selectSchema = evt.data.data[xAxisDataeaseName]
      const paramData = parseJson(chart.data?.data)
      const selectData = paramData.filter(item => item.field === selectSchema)
      const quotaList = []
      selectData.forEach(item => {
        quotaList.push({ ...item.quotaList[0], value: item.value })
      })
      if (selectData.length) {
        const param = {
          x: evt.x,
          y: evt.y,
          data: {
            data: {
              ...evt.data.data,
              value: quotaList[0].value,
              name: selectSchema,
              dimensionList: selectData[0].dimensionList,
              quotaList: quotaList
            }
          }
        }
        action(param)
      }
    })
    return plot
  }

  protected configBasicStyle(chart: Chart, options: MixOptions): MixOptions {
    // size
    const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
    const s = JSON.parse(JSON.stringify(customAttr.basicStyle))
    const smooth = s.lineSmooth
    const point = {
      size: s.lineSymbolSize,
      shape: s.lineSymbol
    }
    const lineStyle = {
      lineWidth: s.lineWidth
    }
    const plots = []
    options.plots.forEach(item => {
      if (item.type === 'stock') {
        plots.push({ ...item })
      }
      if (item.type === 'line') {
        plots.push({ ...item, options: { ...item.options, smooth, point, lineStyle } })
      }
    })
    return {
      ...options,
      plots
    }
  }

  protected configTooltip(chart: Chart, options: MixOptions): MixOptions {
    const tooltipAttr = parseJson(chart.customAttr).tooltip
    const newPlots = []
    const linePlotList = options.plots.filter(item => item.type === 'line')
    linePlotList.forEach(item => {
      newPlots.push(item)
    })
    const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
    if (!tooltipAttr.show) {
      const stockOption = {
        ...stockPlot.options,
        tooltip: {
          showContent: false
        }
      }
      newPlots.push({ ...stockPlot, options: stockOption })
      return {
        ...options,
        plots: newPlots
      }
    }

    const showFiled = chart.data.fields
    const customTooltipItems = originalItems => {
      const formattedItems = originalItems.map(item => {
        const fieldObj = showFiled.find(q => q.dataeaseName === item.name)
        const displayName = fieldObj?.chartShowName || fieldObj?.name || item.name
        const formattedName = displayName.startsWith('ma') ? displayName.toUpperCase() : displayName
        tooltipAttr.tooltipFormatter.decimalCount = 3
        const formattedValue = valueFormatter(item.value, tooltipAttr.tooltipFormatter)

        return {
          ...item,
          name: formattedName,
          value: formattedValue,
          color: item.color
        }
      })

      const hasKLine = formattedItems.some(item => !item.name.startsWith('MA'))
      const kLines = formattedItems.filter(item => !item.name.startsWith('MA'))
      return hasKLine
        ? [
            { name: '日K', value: '', marker: true, color: kLines[0]?.color },
            ...kLines,
            ...formattedItems.filter(item => item.name.startsWith('MA'))
          ]
        : formattedItems
    }
    const formatTooltipItem = (item: any) => {
      const size = item.name.startsWith('MA') || !item.value ? 10 : 5
      const markerMarginRight = item.name.startsWith('MA') || !item.value ? 5 : 9
      const markerMarginLeft = item.name.startsWith('MA') || !item.value ? 0 : 2
      return `
        <li style="display: flex; align-items: center; margin-bottom: 10px;">
          <div>
            <span
              style="
                background-color: ${item.color};
                width: ${size}px;
                height: ${size}px;
                border-radius: 50%;
                display: inline-block;
                margin-right: ${markerMarginRight}px;
                margin-left: ${markerMarginLeft}px;
              "></span>
          </div>
          <div style="display: flex; justify-content: space-between; width: 100%;">
            <span style="margin-right: 15px;">${item.name}</span>
            <span>${item.name.startsWith('MA') && item.value === '0' ? '-' : item.value}</span>
          </div>
        </li>
      `
    }
    const generateCustomTooltipContent = (title: string, items: Array<any>) => {
      return `
        <div style="padding: 10px 0;">
          <div style="margin-bottom: 10px;">${title}</div>
          <ul style="list-style: none; padding: 0;">
            ${items.map(formatTooltipItem).join('')}
          </ul>
        </div>
      `
    }
    const stockOption = {
      ...stockPlot.options,
      tooltip: {
        showMarkers: true,
        showCrosshairs: true,
        showNil: true,
        crosshairs: {
          follow: true,
          text: (axisType, value, data) => {
            if (axisType === 'y') {
              return { content: value ? value.toFixed(0) : value }
            }
            return { content: data[0].title, position: 'end' }
          }
        },
        showContent: true,
        customItems: customTooltipItems,
        customContent: generateCustomTooltipContent
      }
    }
    newPlots.push({ ...stockPlot, options: stockOption })
    return {
      ...options,
      plots: newPlots
    }
  }

  protected configXAxis(chart: Chart, options: MixOptions): MixOptions {
    const xAxisOptions = super.configXAxis(chart, options)
    if (!xAxisOptions) {
      return options
    }
    const newPlots = []
    const linePlotList = options.plots.filter(item => item.type === 'line')

    const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
    const newStockPlot = {
      ...stockPlot,
      options: {
        ...stockPlot.options,
        xAxis: xAxisOptions['xAxis']
          ? {
              ...stockPlot.options['xAxis'],
              ...xAxisOptions['xAxis']
            }
          : {
              label: false,
              line: null
            }
      }
    }
    newPlots.push(newStockPlot)
    linePlotList.forEach(item => {
      newPlots.push(item)
    })
    return {
      ...options,
      plots: newPlots
    }
  }
  protected configYAxis(chart: Chart, options: MixOptions): MixOptions {
    const yAxisOptions = super.configYAxis(chart, options)
    if (!yAxisOptions) {
      return options
    }
    const yAxis = parseJson(chart.customStyle).yAxis
    const newPlots = []
    const linePlotList = options.plots.filter(item => item.type === 'line')

    const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
    let label = false
    if (yAxisOptions['yAxis'].label) {
      label = {
        ...yAxisOptions['yAxis'].label,
        formatter: value => {
          return valueFormatter(value, yAxis.axisLabelFormatter)
        }
      }
    }
    const newStockPlot = {
      ...stockPlot,
      options: {
        ...stockPlot.options,
        yAxis: label
          ? {
              ...stockPlot.options['yAxis'],
              ...yAxisOptions['yAxis'],
              label
            }
          : {
              ...yAxisOptions['yAxis'],
              label,
              grid: null,
              line: null
            }
      }
    }
    newPlots.push(newStockPlot)
    linePlotList.forEach(item => {
      newPlots.push(item)
    })
    return {
      ...options,
      plots: newPlots
    }
  }

  protected customConfigEmptyDataStrategy(chart: Chart, options: MixOptions): MixOptions {
    const { data } = options as unknown as Options
    if (!data?.length) {
      return options
    }
    const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy
    if (strategy === 'ignoreData') {
      for (let i = data.length - 1; i >= 0; i--) {
        const item = data[i]
        Object.keys(item).forEach(key => {
          if (key.startsWith('f_') && item[key] === null) {
            data.splice(i, 1)
          }
        })
      }
    }
    const updateValues = (strategy: 'breakLine' | 'setZero', data: any[]) => {
      data.forEach(obj => {
        Object.keys(obj).forEach(key => {
          if (key.startsWith('f_') && obj[key] === null) {
            obj[key] = strategy === 'breakLine' ? null : 0
          }
        })
      })
    }
    if (strategy === 'breakLine' || strategy === 'setZero') {
      updateValues(strategy, data)
    }
    return options
  }
  protected configLegend(chart: Chart, options: MixOptions): MixOptions {
    let legend = {}
    let customStyle: CustomStyle
    const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
    if (chart.customStyle) {
      customStyle = parseJson(chart.customStyle)
      // legend
      if (customStyle.legend) {
        const l = JSON.parse(JSON.stringify(customStyle.legend))
        if (l.show) {
          legend = {
            ...stockPlot.options.legend,
            itemName: {
              style: {
                fill: l.color,
                fontSize: l.fontSize
              }
            }
          }
        } else {
          legend = false
        }
      }
    }
    const newPlots = []
    const stockOption = {
      ...stockPlot.options,
      legend: legend
    }
    const linePlotList = options.plots.filter(item => item.type === 'line')
    linePlotList.forEach(item => {
      newPlots.push(item)
    })
    newPlots.push({ ...stockPlot, options: stockOption })
    return {
      ...options,
      plots: newPlots
    }
  }

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

  constructor(name = 'stock-line') {
    super(name, DEFAULT_DATA)
  }
}