const LISTENERS = []
const $tooltip = document.querySelector('#tooltip')

export function attachTooltip() {
    document.body.addEventListener('mousemove', e => {
        $tooltip.style.setProperty('--x', 10 + e.pageX + 'px')
        $tooltip.style.setProperty('--y', 10 + e.pageY + 'px')

        LISTENERS.find(listener => listener(e.target))
    })

    resetTooltip()
}

export function addTooltipElementListener(callbackFn) {
    LISTENERS.push(callbackFn)
}

export function setTooltip(mountFn) {
    $tooltip.classList.remove('hidden')
    mountFn($tooltip)
}

export function setTooltipText(text) {
    $tooltip.classList.remove('hidden')
    setTooltip($t => {
        $t.innerText = text
    })
}

export function resetTooltip() {
    $tooltip.classList.add('hidden')
    $tooltip.innerHTML = ''
}