import { DualAxes, Plot } from '@antv/g2plot'

/**
 * 使用 Map 来存储实例，键为 chart.container 对象
 */
export const CAROUSEL_MANAGER_INSTANCES = new Map<string, ChartCarouselTooltip>()
/**
 * 支持的图表类型
 */
const CHART_CATEGORY = {
  COLUMN: ['bar', 'bar-stack', 'bar-group', 'bar-group-stack', 'percentage-bar-stack'],
  LINE: ['line', 'area', 'area-stack'],
  MIX: ['chart-mix', 'chart-mix-group', 'chart-mix-stack', 'chart-mix-dual-line'],
  PIE: ['pie', 'pie-donut']
}

/**
 * 判断是否为柱状图
 * @param chartType
 */
export function isColumn(chartType: string) {
  return CHART_CATEGORY.COLUMN.includes(chartType)
}

/**
 * 判断是否为折线图
 * @param chartType
 */
export function isLine(chartType: string) {
  return CHART_CATEGORY.LINE.includes(chartType)
}

/**
 * 判断是否为饼图
 * @param chartType
 */
export function isPie(chartType: string) {
  return CHART_CATEGORY.PIE.includes(chartType)
}

/**
 * 判断是否为组合图
 * @param chartType
 */
export function isMix(chartType: string) {
  return CHART_CATEGORY.MIX.includes(chartType)
}

export function isSupport(chartType: string) {
  return Object.values(CHART_CATEGORY).some(category => category.includes(chartType))
}

// 轮播配置默认值
const DEFAULT_CAROUSEL_CONFIG: Required<CarouselConfig> = {
  xField: '',
  duration: 2000,
  interval: 2000,
  loop: true
}

type CarouselConfig = {
  xField: string
  duration?: number
  interval?: number
  loop?: boolean
}

/**
 * 图表轮播提示管理类
 * */
class ChartCarouselTooltip {
  private plot: Plot | DualAxes
  private config: Required<CarouselConfig>
  private currentIndex = 0
  private values: string[] = []
  // 合并定时器管理
  private timers = { interval: null, carousel: null }
  private states = { paused: false, destroyed: false }
  // 图表可视性变化
  private observers: Map<string, IntersectionObserver> = new Map()
  // 图表元素大小变化
  private resizeObservers: Map<string, ResizeObserver> = new Map()
  // 图表是否在可视范围内
  private chartIsVisible: boolean

  private constructor(plot: Plot | DualAxes, private chart: Chart, config: CarouselConfig) {
    this.plot = plot
    this.config = { ...DEFAULT_CAROUSEL_CONFIG, ...config }
    this.init()
  }

  /**
   * 创建或更新实例
   * */
  static manage(plot: Plot | DualAxes, chart: Chart, config: CarouselConfig) {
    if (!isSupport(chart.type)) return null
    const container = chart.container
    let instance = CAROUSEL_MANAGER_INSTANCES.get(container)

    CAROUSEL_MANAGER_INSTANCES.forEach(instance => {
      if (container.includes('viewDialog')) {
        instance.paused()
      }
    })

    if (instance) {
      instance.update(plot, chart, config)
      return instance
    }
    if (isSupport(chart.type)) {
      instance = new this(plot, chart, config)
      CAROUSEL_MANAGER_INSTANCES.set(container, instance)
    }

    return instance
  }

  /**
   * 销毁实例
   * @param container
   */
  static destroyByContainer(container: string) {
    const instance = CAROUSEL_MANAGER_INSTANCES.get(container)
    if (instance) {
      instance.destroy()
    }
  }

  /**
   * 通过容器DOM获取对应实例
   * */
  static getInstanceByContainer(container: string) {
    const instance = CAROUSEL_MANAGER_INSTANCES.get(container)
    if (instance) {
      return instance
    }
    return null
  }

  /**
   * 通过chart.id销毁对应实例
   * 关闭放大图表弹窗，销毁对应实例
   * 重启图表自身轮播
   * */
  static closeEnlargeDialogDestroy(id?: string) {
    // 首先，暂停并删除包含 'viewDialog' 的实例
    CAROUSEL_MANAGER_INSTANCES?.forEach((instance, key) => {
      if (instance.chart.id === id && instance.chart.container.includes('viewDialog')) {
        const dialogInstance = CAROUSEL_MANAGER_INSTANCES.get(key)
        if (dialogInstance) {
          dialogInstance.destroy()
        }
      }
    })
    setTimeout(() => {
      // 然后，恢复
      CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
        if (instance.chartIsVisible) {
          instance.resume()
        }
      })
    }, 400)
  }

  /**
   * 暂停轮播
   * @param id
   */
  static paused(id?: string) {
    CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
      if (id && instance.chart.id === id) {
        setTimeout(() => instance.paused(), 200)
      }
      if (!id) {
        setTimeout(() => instance.paused(), 200)
      }
    })
  }

  /**
   * @param id
   */
  static resume(id?: string) {
    CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
      if (instance.chart.id === id) {
        instance.paused()
        setTimeout(() => instance.resume(), 500)
      }
      if (!id) {
        setTimeout(() => instance.resume(), 200)
      }
    })
  }

  /**
   * 初始化核心逻辑
   * */
  private init() {
    this.values = [].concat(this.getUniqueValues())
    if (!this.values.length) return
    this.chartIsVisible = true
    this.states.paused = false
    this.states.destroyed = false
    this.bindEventListeners()
    this.startCarousel()
  }

  /**
   * 获取图表唯一值集合
   * */
  private getUniqueValues() {
    const data =
      this.plot instanceof DualAxes
        ? [...this.plot.options.data[0], ...this.plot.options.data[1]]
        : this.plot.options.data

    return [...new Set(data.map(item => item[this.config.xField]))]
  }

  /**
   * 启动轮播
   * */
  private startCarousel() {
    if (!this.shouldStart()) {
      this.stop()
      return
    }
    // 定义启动嵌套定时器的函数
    const startNestedTimers = () => {
      // 重置当前索引
      this.currentIndex = 0
      // 定义递归处理数据数组的函数
      const processArray = () => {
        if (this.states.paused || this.states.destroyed || !this.isElementFullyVisible()) return
        // 获取当前需要显示的值
        const currentValue = this.values[this.currentIndex]
        // 计算 Tooltip 显示的位置
        const point = this.calculatePosition(currentValue)
        // 高亮当前数据点
        this.highlightElement(currentValue)
        if (point) {
          // 显示 Tooltip，并设置其位置为顶部
          this.plot.chart.showTooltip(point)
          this.plot.chart.getController('tooltip').update()
        }
        // 更新索引，指向下一个数据点
        this.currentIndex++
        if (this.currentIndex > this.values.length) {
          this.currentIndex = 0
          this.hideTooltip()
          this.plot.chart.showTooltip({ x: 0, y: 0 })
          this.plot.chart.getController('tooltip').update()
          this.unHighlightPoint(currentValue)
          this.timers.interval = setTimeout(() => processArray(), this.config.interval)
        } else {
          // 如果未遍历完，继续处理下一个数据点
          this.timers.carousel = setTimeout(() => processArray(), this.config.duration)
        }
      }
      processArray()
    }
    this.stop()
    startNestedTimers()
  }

  /**
   *  判断是否满足启动条件' */
  private shouldStart() {
    return (
      this.chart.customAttr?.tooltip?.show &&
      this.chart.customAttr?.tooltip?.carousel?.enable &&
      this.values.length > 0 &&
      this.chartIsVisible &&
      !this.hasParentWithSwitchHidden(this.plot.chart.ele)
    )
  }

  /**
   *  判断图表是否在可视范围内
   *  */
  private isElementFullyVisible(): boolean {
    // 全屏
    const isFullscreen = document.fullscreenElement !== null
    // 新页面或公共连接
    const isNewPagePublicLink = document
      .getElementById('enlarge-inner-content-' + this.chart.id)
      ?.getBoundingClientRect()
    const isMobileEdit = document.getElementsByClassName('panel-mobile')?.length > 0
    const isMobileList = document.getElementsByClassName('mobile-com-list')?.length > 0
    if (isMobileList) {
      return false
    }
    const rect = this.plot.chart.ele.getBoundingClientRect()
    return (
      rect.top >= (isFullscreen || isNewPagePublicLink || isMobileEdit ? 0 : 64) &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    )
  }
  /**
   *  计算元素位置（核心定位逻辑）
   *  */
  private calculatePosition(value: string) {
    const view = this.plot.chart.views?.[0] || this.plot.chart
    // 饼图特殊处理
    if (CHART_CATEGORY.PIE.includes(this.chart.type)) {
      return this.getPieTooltipPosition(view, value)
    }
    if (this.plot instanceof DualAxes) {
      return this.getDualAxesTooltipPosition(view, value)
    }
    const types = view
      .scale()
      .getGeometries()
      .map(item => item.type)
    let point = { x: 0, y: 0 }
    if (!types.length) return point
    types.forEach(type => {
      if (type === 'interval' || type === 'point') {
        point = view
          .scale()
          .getGeometries()
          .find(item => item.type === type)
          .elements.find(item => item.data.field === value && (item.model.x || item.model.y))?.model
      }
    })
    // 处理柱状图和折线图,柱状图固定y轴位置
    const y = CHART_CATEGORY.COLUMN.includes(this.chart.type) ? 0 : [].concat(point?.y)?.[0]
    return { x: [].concat(point?.x)?.[0], y: y }
  }

  /**
   *  计算饼图元素位置
   *  */
  private getPieTooltipPosition(view, value: string) {
    const piePoint = view
      .scale()
      .getGeometries()[0]
      ?.elements.find(item => item.data.field === value)
      ?.getModel()
    if (!piePoint) {
      return { x: 0, y: 0 }
    }
    const coordinates = [
      { x: [].concat(piePoint.x)[0], y: piePoint.y[0] },
      { x: piePoint.x[0], y: piePoint.y[1] },
      { x: piePoint.x[1], y: piePoint.y[0] },
      { x: piePoint.x[1], y: piePoint.y[1] }
    ]
    const index = coordinates.findIndex(coord => {
      const items = this.plot.chart.getTooltipItems(coord)
      return items.some(item => item.data.field === value)
    })
    if (index !== -1) {
      return coordinates[index]
    } else {
      return {
        x: piePoint.x[0],
        y: piePoint.y[0]
      }
    }
  }

  /**
   * 获取双轴图表的 Tooltip 位置
   * @param view
   * @param value
   * @private
   */
  private getDualAxesTooltipPosition(view, value: string) {
    const xScale = view.getXScale()
    if (!xScale) return { x: 0, y: 0 }
    const values = xScale.values
    if (values.length < 2) {
      const point = view
        .getGeometries()?.[0]
        .elements[view.getGeometries()?.[0].elements?.length - 1].getModel()
      return point || { x: 0, y: 0 }
    }
    const [rangeStart, rangeEnd] = xScale.range
    const totalMonths = values.length
    const bandWidth = (rangeEnd - rangeStart) / totalMonths
    const index = values.indexOf(value)
    const xPos = rangeStart + bandWidth * (index + 0.5)
    return view.getCoordinate().convert({ x: xPos, y: 0 })
  }

  /**
   * 高亮指定元素
   * */
  private highlightElement(value: string) {
    if (CHART_CATEGORY.LINE.includes(this.chart.type)) return
    this.unHighlightPoint(value)
    this.plot.setState(
      this.getHighlightType(),
      (data: any) => data[this.config.xField] === value,
      true
    )
  }

  /**
   * 取消高亮
   * **/
  private unHighlightPoint(value?: string) {
    if (CHART_CATEGORY.LINE.includes(this.chart.type)) return
    this.plot.setState(
      this.getHighlightType(),
      (data: any) => data[this.config.xField] !== value,
      false
    )
  }
  private getHighlightType() {
    return 'active'
  }

  /**
   *  隐藏工具提示
   *  */
  private hideTooltip() {
    const container = this.getTooltipContainer()
    if (container) {
      container.style.display = 'none'
    }
  }

  /**
   *  获取工具提示容器
   *  */
  private getTooltipContainer() {
    const tooltipCtl = this.plot.chart.getController('tooltip')
    if (!tooltipCtl) {
      return
    }
    return tooltipCtl.tooltip?.cfg?.container
  }

  /**
   * 判断元素是否有父元素包含 'switch-hidden' 类
   * @param element
   */
  public hasParentWithSwitchHidden(element: HTMLElement) {
    let parent = element.parentElement
    while (parent) {
      if (parent.classList.contains('switch-hidden')) {
        return true
      }
      parent = parent.parentElement
    }
    return false
  }

  /**
   *  绑定事件监听
   *  */
  private bindEventListeners() {
    // 定义图表元素ID前缀数组
    // 图表在不同的显示页面可能有不同的ID前缀
    const chartElementIds = ['container-canvas-%s-common']
    let chartElement = null

    const sprintf = (fmt: string, ...args: unknown[]) => {
      let i = 0
      return fmt.replace(/%s/g, () => String(args[i++]))
    }
    // 查找图表元素
    for (const idPrefix of chartElementIds) {
      chartElement = document.getElementById(sprintf(idPrefix, this.chart.id))
      if (chartElement) break
    }
    // 绑定鼠标进入和离开事件
    const addMouseEvent = el => {
      el?.addEventListener('mouseenter', () => this.paused())
      el?.addEventListener('mouseleave', ev => {
        setTimeout(() => {
          // 获取鼠标位置
          const mouseX = ev.clientX
          const mouseY = ev.clientY
          // 获取div的边界信息
          const rect = el.getBoundingClientRect()
          // 判断鼠标位置是否在div内
          const isInside =
            mouseX >= rect.left + 10 &&
            mouseX <= rect.right - 10 &&
            mouseY >= rect.top + 10 &&
            mouseY <= rect.bottom - 10
          console.log(isInside)
          if (!isInside) {
            this.paused()
            this.resume()
          }
        }, 300)
      })
    }
    addMouseEvent(chartElement)
    const showViewDialog = document.getElementById(
      'container-viewDialog-' + this.chart.id + '-common'
    )
    if (showViewDialog && this.chart.container?.startsWith('container-viewDialog-')) {
      addMouseEvent(showViewDialog)
    }
    // 定义鼠标滚轮事件处理函数
    const handleMouseWheel = this.debounce(() => {
      CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
        // 如果元素有父元素不包含 'switch-hidden' 类，则继续轮播
        if (!this.hasParentWithSwitchHidden(instance.plot.chart.ele)) {
          instance.paused()
          instance.resume()
        }
      })
    }, 0)
    // 定义 touchmove 事件处理函数（移动端）
    const handleTouchMove = (event: TouchEvent) => {
      handleMouseWheel(event)
    }
    // 获取目标元素，优先全屏预览
    const targetDiv =
      document.getElementById('de-preview-content') ||
      document.getElementById('preview-canvas-main') ||
      document.getElementById('dv-main-center') ||
      document.getElementById('edit-canvas-main') ||
      document.getElementById('canvas-mark-line') ||
      document.getElementById('de-canvas-canvas-main')
    // 绑定目标元素的事件
    if (targetDiv) {
      targetDiv.removeEventListener('wheel', handleMouseWheel)
      targetDiv.addEventListener('wheel', handleMouseWheel)
      //移除和添加 touchmove 事件监听器（移动端）
      targetDiv.removeEventListener('touchmove', handleTouchMove)
      targetDiv.addEventListener('touchmove', handleTouchMove)
    }
    // 页面可见性控制
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
          instance.paused()
        })
      } else if (this.chartIsVisible) {
        CAROUSEL_MANAGER_INSTANCES?.forEach(instance => {
          instance.resume()
        })
      }
    })
    // 元素可视性观察（交叉观察器）
    this.setupIntersectionObserver()
    // 元素大小观察（大小观察器）
    this.setupResizeObserver()
  }

  /**
   * 设置暂停状态
   * */
  private setPaused(state: boolean) {
    this.states.paused = state
    state ? this.stop() : this.startCarousel()
  }
  /**
   * 设置交叉观察器
   * */
  private setupIntersectionObserver() {
    setTimeout(() => {
      // 监听元素可见性变化,全部可见时开始轮播
      if (!this.observers.get(this.plot.chart.ele.id)) {
        this.observers.set(
          this.plot.chart.ele.id,
          new IntersectionObserver(
            entries => {
              entries.forEach(entry => {
                if (entry.intersectionRatio < 0.7) {
                  this.paused()
                  this.chartIsVisible = false
                } else {
                  this.paused()
                  this.chartIsVisible = true
                  this.resume()
                }
              })
            },
            { threshold: [0.7] }
          )
        )
        this.observers.get(this.plot.chart.ele.id).observe(this.plot.chart.ele)
      }
    }, 100)
  }

  /**
   * 设置元素大小观察器
   * 当元素全部可见时
   * 图表的最外层元素
   * @private
   */
  private setupResizeObserver() {
    // 放大图表弹窗不需要监听
    if (this.plot.chart.ele.id.includes('viewDialog')) return
    // 创建防抖回调函数
    const debouncedCallback = (entries: ResizeObserverEntry[]) => {
      for (const entry of entries) {
        if (entry.target) {
          this.debounce(() => {
            this.paused()
            this.resume()
          }, 200)
        }
      }
    }
    // 监听元素大小, 发生变化时重新轮播
    if (!this.resizeObservers.get(this.plot.chart.ele.id)) {
      this.resizeObservers.set(this.plot.chart.ele.id, new ResizeObserver(debouncedCallback))
      this.resizeObservers.get(this.plot.chart.ele.id).observe(this.plot.chart.ele)
    }
  }

  /**
   * 更新配置
   * */
  private update(plot: Plot | DualAxes, chart: Chart, config: CarouselConfig) {
    this.stop()
    this.plot = plot
    this.chart = chart
    this.config = { ...this.config, ...config }
    this.currentIndex = 0
    this.init()
  }

  /**
   * 停止定时器
   * @private
   */
  private stop() {
    clearTimeout(this.timers.interval)
    clearTimeout(this.timers.carousel)
    this.timers = { interval: null, carousel: null }
  }

  /**
   * 销毁实例
   * */
  destroy() {
    this.stop()
    this.clearObserver()
    this.states.destroyed = true
    CAROUSEL_MANAGER_INSTANCES.delete(this.chart.container)
  }
  /**
   * 清除观察器
   * */
  clearObserver() {
    const observer = this.observers.get(this.plot.chart.ele.id)
    if (observer) {
      observer.disconnect()
      this.observers.delete(this.plot.chart.ele.id)
    }
    const resizeObservers = this.resizeObservers.get(this.plot.chart.ele.id)
    if (resizeObservers) {
      resizeObservers.disconnect()
      this.resizeObservers.delete(this.plot.chart.ele.id)
    }
  }
  /** 暂停 */
  paused() {
    this.hideTooltip()
    this.unHighlightPoint()
    this.setPaused(true)
  }

  /** 恢复 */
  resume() {
    this.setPaused(false)
  }

  /**
   * 防抖
   */
  private debounce(func: (...args: any[]) => void, delay: number): (...args: any[]) => void {
    let timeout: number | null = null
    return (...args: any[]) => {
      if (timeout) clearTimeout(timeout)
      timeout = window.setTimeout(() => {
        func(...args)
      }, delay)
    }
  }
}

export default ChartCarouselTooltip