import * as Cesium from 'cesium'
import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue'

/**
 * 地图弹窗 Hook
 * @param {Cesium.Viewer} viewer - Cesium 实例
 * @param {Object} options - 配置选项
 * @param {Component} options.popupComponent - 弹窗组件
 */
export function useMapPopup (viewer, options = {}) {
  const { currentEntity } = options

  // 获取弹框box
  const getLabelDom = data => {
    const vNode = h(EventPopUpBox, { data, removeLabel })
    const tooltipContainer = document.createElement('div')
    tooltipContainer.id = 'mapPopUpBox'
    tooltipContainer.style.position = 'absolute'
    tooltipContainer.style.transform = styleTransform
    tooltipContainer.style.pointerEvents = 'none'
    document.querySelector('.page-index').append(tooltipContainer)
    render(vNode, tooltipContainer)
    return tooltipContainer
  }

  // 弹框位置刷新
  const labelBoxRender = () => {
    if (!currentEntity) return
    let dom = document.querySelector('#mapPopUpBox')
    if (!dom) {
      dom = getLabelDom(currentEntity.properties.customData._value.data)
    }
    const screenPosition = viewer.scene.cartesianToCanvasCoordinates(currentEntity?.position?._value)
    if (screenPosition) {
      dom.style.left = `${screenPosition.x}px`
      dom.style.top = `${screenPosition.y}px`
      dom.style.display = 'block'
    }
  }

  const removeDom = () => {
    const dom = document.querySelector('#mapPopUpBox')
    if (dom && dom.parentNode) {
      dom.parentNode.removeChild(dom)
    }
  }

  const addLabel = () => {
    removeLabel()
    viewer?.scene.postRender.addEventListener(labelBoxRender)
  }

  // 移除弹框标签
  const removeLabel = () => {
    viewer?.scene.postRender.removeEventListener(labelBoxRender)
    removeDom()
  }

  // 自动清理
  onUnmounted(() => {
    removeLabel()
  })

  return {
    addLabel
  }
}