import { ref } from 'vue'

/**
 * 地图 Tooltip 状态管理
 * 用于显示地图标记点的轻量级信息提示框
 */
export function useMapTooltip() {
  // Tooltip 状态
  const tooltipState = ref({
    visible: false,
    x: 0,
    y: 0,
    title: '',
    icon: '',
    zIndex: 20,
    data: null // 业务数据，用于内容插槽渲染
  })

  /**
   * 显示 Tooltip
   * @param {Object} options - Tooltip 配置选项
   * @param {number} options.x - 屏幕 X 坐标（像素）
   * @param {number} options.y - 屏幕 Y 坐标（像素）
   * @param {string} [options.title=''] - Tooltip 标题文本
   * @param {string} [options.icon=''] - 标题左侧图标的图片路径
   * @param {Object} [options.data=null] - 业务数据
   */
  const showTooltip = ({ x, y, title = '', icon = '', data = null }) => {
    tooltipState.value = {
      visible: true,
      x,
      y,
      title,
      icon,
      zIndex: 20,
      data
    }
  }

  /**
   * 隐藏 Tooltip
   */
  const hideTooltip = () => {
    tooltipState.value.visible = false
  }

  /**
   * 更新 Tooltip 位置
   * @param {number} x - 屏幕 X 坐标
   * @param {number} y - 屏幕 Y 坐标
   */
  const updateTooltipPosition = (x, y) => {
    tooltipState.value.x = x
    tooltipState.value.y = y
  }

  return {
    tooltipState,
    showTooltip,
    hideTooltip,
    updateTooltipPosition
  }
}