export class MapTooltip {
	constructor(viewer, options = {}) {
		this.viewer = viewer
		this.options = options
		this.container = viewer?.container || null
		this.tooltipEl = null
		this.isVisible = false
		this.init()
	}

	init() {
		if (!this.container || this.tooltipEl) return
		const el = document.createElement('div')
		el.style.position = 'absolute'
		el.style.pointerEvents = 'none'
		el.style.padding = '6px 8px'
		el.style.background = 'rgba(0, 0, 0, 0.65)'
		el.style.color = '#fff'
		el.style.fontSize = '12px'
		el.style.borderRadius = '4px'
		el.style.whiteSpace = 'nowrap'
		el.style.zIndex = '1000'
		el.style.display = 'none'
		this.container.appendChild(el)
		this.tooltipEl = el
	}

	show(text, position) {
		if (!this.tooltipEl) return
		this.tooltipEl.textContent = text || ''
		this.tooltipEl.style.display = 'block'
		this.isVisible = true
		if (position) this.move(position)
	}

	move(position) {
		if (!this.tooltipEl || !position) return
		const offset = this.options.offset || { x: 12, y: 12 }
		this.tooltipEl.style.left = `${position.x + offset.x}px`
		this.tooltipEl.style.top = `${position.y + offset.y}px`
	}

	hide() {
		if (!this.tooltipEl) return
		this.tooltipEl.style.display = 'none'
		this.isVisible = false
	}

	destroy() {
		this.hide()
		if (this.tooltipEl && this.container) {
			this.container.removeChild(this.tooltipEl)
		}
		this.tooltipEl = null
		this.container = null
		this.viewer = null
	}
}