import { valueFormatter } from '@/views/chart/components/js/formatter'
import { hexToRgba, parseJson } from '@/views/chart/components/js/util'
import { isEmpty } from 'lodash-es'

export const clearExtremum = chart => {
  // 清除图表标注
  const pointElement = document.getElementById(chartPointParentId(chart))
  if (pointElement) {
    pointElement.remove()
    pointElement.parentNode?.removeChild(pointElement)
  }
}

/**
 * 判断给定的RGBA字符串表示的颜色是亮色还是暗色
 * 通过计算RGB颜色值的加权平均值（灰度值），判断颜色的明暗
 * 如果给定的字符串不包含有效的RGBA值，则原样返回该字符串
 *
 * @param rgbaString 一个RGBA颜色字符串，例如 "rgba(255, 255, 255, 1)"
 * @param greyValue 灰度值默认128
 * @returns 如果计算出的灰度值大于等于128，则返回true，表示亮色；否则返回false，表示暗色。
 *          如果rgbaString不包含有效的RGBA值，则返回原字符串
 */
const isColorLight = (rgbaString: string, greyValue = 128) => {
  const lastRGBA = getRgbaColorLastRgba(rgbaString)
  if (!isEmpty(lastRGBA)) {
    // 计算灰度值的公式
    const grayLevel = lastRGBA.r * 0.299 + lastRGBA.g * 0.587 + lastRGBA.b * 0.114
    return grayLevel >= greyValue
  } else {
    return false
  }
}

/**
 * 从给定的rgba颜色字符串中提取最后一个rgba值
 * @param rgbaString 包含一个或多个rgba颜色值的字符串
 * @returns 返回最后一个解析出的rgba对象，如果未找到rgba值，则返回null
 */
const getRgbaColorLastRgba = (rgbaString: string) => {
  const rgbaPattern = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/g
  let match: string[]
  let lastRGBA = null
  while ((match = rgbaPattern.exec(rgbaString)) !== null) {
    const r = parseInt(match[1])
    const g = parseInt(match[2])
    const b = parseInt(match[3])
    const a = parseFloat(match[4])
    lastRGBA = { r, g, b, a }
  }
  return lastRGBA
}

function createExtremumDiv(id, value, formatterCfg, chart) {
  // 空值不处理
  if (!value && value != 0) {
    return
  }
  // 装标注的div
  const parentElement = document.getElementById(chartPointParentId(chart))
  if (parentElement) {
    // 标注div
    const oldElement = document.getElementById(id)
    if (oldElement) {
      oldElement.remove()
      oldElement.parentNode?.removeChild(oldElement)
    }
    const div = document.createElement('div')
    div.id = id
    div.className = 'child'
    div.setAttribute(
      'style',
      `width: auto;
        height: auto;
        border-radius: 2px;
        position: relative;
        padding: 4px 5px 4px 5px;
        display:none;
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
        white-space:nowrap;
        overflow:auto;`
    )
    div.textContent = valueFormatter(value, formatterCfg)
    const span = document.createElement('span')
    span.setAttribute(
      'style',
      `width: 0px;
        height: 12px;
        border: 4px solid transparent;
        border-top-color: red;
        position: absolute;
        left: calc(50% - 4px);
        margin-top:4px;`
    )
    div.appendChild(span)
    parentElement.appendChild(div)
  }
}
/**
 * 没有子类别字段的图表
 * @param chart
 */
const noChildrenFieldChart = chart => {
  return ['area', 'bar'].includes(chart.type)
}

/**
 * 支持最值图表的折线图，面积图，柱状图，分组柱状图
 * @param chart
 */
export const supportExtremumChartType = chart => {
  return ['line', 'area', 'bar', 'bar-group'].includes(chart.type)
}

const chartContainerId = chart => {
  return chart.container + '_'
}

const chartPointParentId = chart => {
  return chart.container + '_point_' + chart.id + '_'
}

function removeDivsWithPrefix(parentDivId, prefix) {
  const parentDiv = document.getElementById(parentDivId)
  if (!parentDiv) {
    console.error('Parent div not found')
    return
  }
  const childDivs = parentDiv.getElementsByTagName('div')
  for (let i = childDivs.length - 1; i >= 0; i--) {
    const div = childDivs[i]
    if (div.id && div.id.startsWith(prefix)) {
      div.parentNode.removeChild(div)
    }
  }
}

export const extremumEvt = (newChart, chart, _options, container) => {
  chart.container = container
  clearExtremum(chart)
  if (!supportExtremumChartType(chart)) {
    return
  }
  const { label: labelAttr } = parseJson(chart.customAttr)
  const { yAxis } = parseJson(chart)
  newChart.once('beforerender', ev => {
    ev.view.on('beforepaint', () => {
      newChart.chart.geometries[0]?.beforeMappingData.forEach(i => {
        i.forEach(item => {
          delete item._origin.EXTREME
        })
        const { minItem, maxItem } = findMinMax(
          i.filter(item => item?._origin?.value !== null && item?._origin?.value !== undefined)
        )
        if (!minItem || !maxItem) {
          return
        }
        let showExtremum = false
        if (noChildrenFieldChart(chart) || yAxis.length > 1) {
          const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(
            d =>
              (d.chartShowName ? d.chartShowName : d.name === minItem._origin.category) ||
              (d.chartShowName ? d.chartShowName : d.name === maxItem._origin.category)
          )
          showExtremum = seriesLabelFormatter?.showExtremum
        } else {
          if (['bar-group'].includes(chart.type)) {
            showExtremum = labelAttr.showExtremum
          } else {
            showExtremum = labelAttr.seriesLabelFormatter[0]?.showExtremum
          }
        }
        if (showExtremum) {
          minItem._origin.EXTREME = true
          maxItem._origin.EXTREME = true
        }
      })
    })
    newChart.chart.geometries[0].on('afteranimate', () => {
      createExtremumPoint(chart, ev)
    })
  })
  newChart.on('legend-item:click', ev => {
    const legendHideData = ev.view
      .getController('legend')
      .components[0].component.cfg.items.filter(l => l.unchecked)
    if (legendHideData.length > 0) {
      legendHideData.forEach(l => {
        const seriesKey = chartContainerId(chart) + chartPointParentId(chart) + l.id
        removeDivsWithPrefix(chartPointParentId(chart), seriesKey)
      })
    }
  })
}

const findMinMax = (data): { minItem; maxItem } => {
  return data.reduce(
    ({ minItem, maxItem }, currentItem) => {
      if (minItem === undefined || currentItem._origin.value < minItem._origin.value) {
        minItem = currentItem
      }
      if (maxItem === undefined || currentItem._origin.value > maxItem._origin.value) {
        maxItem = currentItem
      }
      delete minItem?._origin.EXTREME
      delete maxItem?._origin.EXTREME
      return { minItem, maxItem }
    },
    { minItem: undefined, maxItem: undefined }
  )
}
export const createExtremumPoint = (chart, ev) => {
  // 获取标注样式
  const { label: labelAttr, basicStyle } = parseJson(chart.customAttr)
  const pointSize = basicStyle.lineSymbolSize
  const { yAxis } = parseJson(chart)
  clearExtremum(chart)
  // 创建标注父元素
  const divParentElement = document.getElementById(chartPointParentId(chart))
  if (!divParentElement) {
    const divParent = document.createElement('div')
    divParent.id = chartPointParentId(chart)
    divParent.style.position = 'fixed'
    divParent.style.zIndex = '1'
    divParent.style.opacity = '0'
    divParent.style.transition = 'opacity 0.2s ease-in-out'
    divParent.style.overflow = 'visible'
    divParent.style['pointer-events'] = 'none'
    // 将父标注加入到图表中
    const containerElement = document.getElementById(chart.container)
    containerElement.insertBefore(divParent, containerElement.firstChild)
    // 处理最值闪烁的问题
    let opacity = 0
    const animate = () => {
      // 增加不透明度
      opacity += 0.19
      if (opacity >= 1) {
        cancelAnimationFrame(animationFrameId)
        return
      }
      divParent.style.opacity = opacity + ''
      animationFrameId = requestAnimationFrame(animate)
    }
    let animationFrameId = requestAnimationFrame(animate)
  }
  let geometriesDataArray = []
  // 获取数据点
  const intervalPoint = ev.view
    .getGeometries()
    .find((intervalItem: { type: string }) => intervalItem.type === 'interval')
  if (intervalPoint) {
    geometriesDataArray = intervalPoint.dataArray
  }
  const pointPoint = ev.view
    .getGeometries()
    .find((pointItem: { type: string }) => pointItem.type === 'point')
  if (pointPoint) {
    geometriesDataArray = pointPoint.dataArray
  }
  performChunk(geometriesDataArray, pointObjList => {
    if (pointObjList && pointObjList.length > 0) {
      const pointObj = pointObjList[0]
      const [minItem, maxItem] = pointObjList.filter(i => i._origin.EXTREME)
      let attr
      let showExtremum = false
      if (noChildrenFieldChart(chart) || yAxis.length > 1) {
        const seriesLabelFormatter = labelAttr.seriesLabelFormatter.find(d =>
          d.chartShowName
            ? d.chartShowName === pointObj._origin.category
            : d.name === pointObj._origin.category
        )
        showExtremum = seriesLabelFormatter?.showExtremum
        attr = seriesLabelFormatter
      } else {
        if (['bar-group'].includes(chart.type)) {
          showExtremum = labelAttr.showExtremum
        } else {
          showExtremum = labelAttr.seriesLabelFormatter[0]?.showExtremum
          attr = labelAttr.seriesLabelFormatter[0]
        }
      }
      const fontSize = attr ? attr.fontSize : labelAttr.fontSize
      if (!minItem) {
        return
      }
      const maxKey =
        chartContainerId(chart) +
        chartPointParentId(chart) +
        pointObj._origin.category +
        '_' +
        (maxItem ? maxItem._origin.value : minItem._origin.value)
      const minKey =
        chartContainerId(chart) +
        chartPointParentId(chart) +
        pointObj._origin.category +
        '_' +
        minItem._origin.value
      // 最值标注
      if (showExtremum && labelAttr.show) {
        if (maxItem) {
          createExtremumDiv(
            maxKey,
            maxItem._origin.value,
            attr ? attr.formatterCfg : labelAttr.labelFormatter,
            chart
          )
        }
        createExtremumDiv(
          minKey,
          minItem._origin.value,
          attr ? attr.formatterCfg : labelAttr.labelFormatter,
          chart
        )
        pointObjList.forEach(point => {
          const pointElement = document.getElementById(
            chartContainerId(chart) +
              chartPointParentId(chart) +
              point._origin.category +
              '_' +
              point._origin.value
          )
          if (pointElement && point._origin.EXTREME) {
            pointElement.style.position = 'absolute'
            const top =
              (point.y[1] ? point.y[1] : point.y) - (fontSize + (pointSize ? pointSize : 0) + 12)
            pointElement.style.top = top + 'px'
            pointElement.style.left = point.x + 'px'
            pointElement.style.zIndex = '10'
            pointElement.style.fontSize = fontSize + 'px'
            pointElement.style.lineHeight = fontSize + 'px'
            // 渐变颜色时需要获取最后一个rgba的值作为背景
            const color = point.color.startsWith('#')
              ? hexToRgba(point.color, basicStyle.alpha / 100)
              : getRgbaColorLastRgba(point.color)
            const { r, b, g, a } = color
            pointElement.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
            pointElement.style.color = isColorLight(point.color) ? '#000' : '#fff'
            pointElement.children[0]['style'].borderTopColor =
              'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
            pointElement.style.display = 'table'
            // 显示箭头
            const childNode = pointElement.childNodes[1]
            // 最值在数据点下方显示
            const translateYValue = Math.ceil(point.y + Math.abs(Math.floor(top)) + 6)
            // 最值dom高度超过50%时，最值dom向下
            if (top < 0 && (Math.abs(top) / point.y) * 100 >= 50) {
              pointElement.style.transform = `translateX(-50%) translateY(${translateYValue}px)`
              childNode.style.marginTop = '-16px'
              childNode.style.transform = 'rotate(180deg)'
            } else {
              childNode.style.display = 'block'
            }
          }
        })
      } else {
        removeDivElement(maxKey)
        removeDivElement(minKey)
      }
    }
  })
}

function removeDivElement(key) {
  const element = document.getElementById(key)
  if (element) {
    element.remove()
    element.parentNode?.removeChild(element)
  }
}

/**
 * 当浏览器不支持requestIdleCallback时，使用setTimeout模拟
 * 该模拟函数会在浏览器空闲时执行回调函数，避免阻塞主线程
 * 模拟的回调函数会在16毫秒后执行，模拟浏览器的空闲时间
 * 该模拟函数会返回一个定时器ID，可以用来取消定时器
 * @param cb 回调函数，接收一个IdleDeadline对象作为参数
 * @returns 返回一个定时器ID，可以用来取消定时器
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
 */
if (typeof window.requestIdleCallback !== 'function') {
  window.requestIdleCallback = function (cb: IdleRequestCallback): number {
    return window.setTimeout(() => {
      cb({
        timeRemaining: () => Math.max(0, 50 - (Date.now() % 50)),
        didTimeout: false
      })
    }, 16)
  }
  window.cancelIdleCallback = function (id: number) {
    clearTimeout(id)
  }
}
/**
 * 用于分批处理数据，利用requestIdleCallback在浏览器空闲期间执行任务，避免阻塞主线程
 * @param dataList
 * @param taskHandler
 */
function performChunk(dataList, taskHandler) {
  if (typeof dataList === 'number') {
    dataList = { length: dataList }
  }
  if (dataList.length === 0) return
  let i = 0
  function _run() {
    if (i >= dataList.length) return
    // 请求浏览器空闲期间执行的回调函数
    if (typeof window.requestIdleCallback == 'function') {
      requestIdleCallback(idle => {
        // 在当前空闲期间内尽可能多地处理任务，直到时间耗尽或所有任务处理完毕
        while (idle.timeRemaining() > 0 && i < dataList.length) {
          taskHandler(dataList[i], i)
          i++
        }
        _run()
      })
    }
  }
  _run()
}