import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'

export default function useCSS2DRender() {
  /**
   * 初始化CSS2D渲染器
   * @param {Object} options - 配置选项
   * @param {HTMLElement} container - 容器元素
   * @returns {CSS2DRenderer} CSS2D渲染器实例
   */
  const initCSS2DRender = (options, container) => {
    const { width, height } = options
    
    // 确保尺寸有效，避免Canvas尺寸为0的错误
    const validWidth = Math.max(width || 800, 1)
    const validHeight = Math.max(height || 600, 1)
    
    let css2dRender = new CSS2DRenderer() // 实例化css2d渲染器
    css2dRender.setSize(validWidth, validHeight) // 设置渲染器的尺寸
    css2dRender.domElement.style.position = 'absolute' // 设置定位位置
    css2dRender.domElement.style.left = '0px'
    css2dRender.domElement.style.top = '0px'
    css2dRender.domElement.style.width = validWidth + 'px'
    css2dRender.domElement.style.height = validHeight + 'px'
    css2dRender.domElement.style.zIndex = '10000' // 确保在WebGL canvas之上
    css2dRender.domElement.style.pointerEvents = 'none' // 设置不能背选中
    css2dRender.domElement.style.overflow = 'visible' // 确保内容可见
    container.appendChild(css2dRender.domElement) // 插入到容器当中
    console.log('CSS2D渲染器DOM元素已插入容器');
    console.log('容器尺寸:', validWidth, 'x', validHeight);
    console.log('DOM元素样式:', css2dRender.domElement.style.cssText);
    return css2dRender
  }

  /**
   * 创建2d标签
   * @param {*} name  标签内容
   * @param {*} className 标签class
   * @returns
   */
  const create2DTag = (name = '', className = '') => {
    let tag = document.createElement('div')
    tag.innerHTML = name
    tag.className = className
    tag.style.pointerEvents = 'none'
    tag.style.visibility = 'hidden'
    tag.style.position = 'absolute'
    // 如果className不存在，用以下样式
    if (!className) {
      tag.style.padding = '10px'
      tag.style.color = '#fff'
      tag.style.fontSize = '12px'
      tag.style.textAlign = 'center'
      tag.style.background = 'rgba(0,0,0,0.6)'
      tag.style.borderRadius = '4px'
    }
    let label = new CSS2DObject(tag)
    /**
     * 标签显示，
     * @param {*} name 显示内容
     * @param {*} point 显示坐标
     */
    label.show = (name, point) => {
      label.element.innerHTML = name
      label.element.style.visibility = 'visible'
      label.position.copy(point)
    }
    /**
     * 隐藏
     */
    label.hide = () => {
      label.element.style.visibility = 'hidden'
    }
    return label
  }

  return {
    initCSS2DRender,
    create2DTag
  }
}