import { createVNode, render } from 'vue'
import ImageMarkTooltip from './ImageMarkTooltip.vue'

class ImageMarkTooltipUI {
  constructor() {
    this.instance = null
    this.container = null
    this.entity = null
    this.root = null
  }

  // 显示 tooltip
  show(options = {}) {
    // 销毁之前的实例
    this.close()

    // 创建容器
    this.container = document.createElement('div')
    this.container.className = 'tooltip-service-container'
    this.root = document.querySelector('.cockpit-main')
    this.root.appendChild(this.container)

    this.entity = options.entity

    // 创建 VNode
    const vnode = createVNode(ImageMarkTooltip, {
      visible: true,
      position: options.position || { x: 0, y: 0 },
      data: options.data || {},
      loading: options.loading || false,
      error: options.error || '',
      onClose: () => {
        this.close()
      }
    })

    // 渲染到容器
    render(vnode, this.container)
    this.instance = vnode.component
    return this.instance
  }

  updatePosition(position) {
    if (this.instance) {
      this.instance.props.position = position
      this.instance.update()
    }
  }

  // 更新 tooltip 内容
  update(options) {
    if (this.instance) {
      this.instance.props = {
        ...this.instance.props,
        ...options
      }
    }
  }

  // 关闭 tooltip
  close() {
    if (this.container) {
      render(null, this.container)
      this.root.removeChild(this.container)
      this.container = null
      this.instance = null
    }
  }
}

// 创建单例实例
const instance = new ImageMarkTooltipUI()

export const CommonTooltip = instance

export const newImageMarkTooltip = () => {
  return new ImageMarkTooltipUI()
}