import { createElement, createElementInit } from "../functions";

function setTooltip(container, content) {
    const tip = container.querySelector('.tooltip-wrapper');
    if (tip != null) {
        tip.remove();
    }
    const wrapper = createElementInit('div', wrapper => {
        wrapper.className = 'tooltip-wrapper tooltip-color';
        wrapper.style.visibility = 'hidden';
        wrapper.style.opacity = 0;
    },
        createElement('div', 'tooltip-pointer tooltip-color'),
        createElement('div', 'tooltip-curtain tooltip-color'),
        createElementInit('div', cnt => {
            cnt.className = 'tooltip-content';
            if (content instanceof HTMLElement) {
                cnt.appendChild(content);
            } else {
                cnt.innerText = content;
            }
        })
    );
    // container.insertAdjacentElement('afterend', wrapper);
    container.appendChild(wrapper);

    let tid;
    container.addEventListener('mouseenter', () => {
        tid && clearTimeout(tid);
        tid = setTimeout(() => {
            while (container?.offsetWidth == null) {
                container = container.parentElement;
            }
            if (container == null) {
                return;
            }
            let parent = container;
            let left = container.offsetLeft;
            let top = container.offsetTop;
            while ((parent = parent.offsetParent) != null) {
                left += parent.offsetLeft;
                top += parent.offsetTop;
            }
            parent = container;
            while ((parent = parent.parentElement) != null) {
                left -= parent.scrollLeft;
                top -= parent.scrollTop;
            }
            left -= wrapper.offsetWidth / 2 - container.offsetWidth / 2;
            top -= wrapper.offsetHeight + 14;
            wrapper.style.left = `${left}px`;
            wrapper.style.top = `${top}px`;
            wrapper.style.visibility = 'visible';
            wrapper.style.opacity = 1;
        }, 100);
    });
    container.addEventListener('mouseleave', () => {
        tid && clearTimeout(tid);
        tid = setTimeout(() => {
            wrapper.style.visibility = 'hidden';
            wrapper.style.opacity = 0;
        }, 300);
    });
    return container;
}

function resolveTooltip(container = document.body) {
    const tips = container.querySelectorAll('[title]');
    for (let tip of tips) {
        const title = tip.getAttribute('title');
        if (title != null) {
            tip.removeAttribute('title');
            setTooltip(tip, title);
        }
    }
    return container;
}

export {
    setTooltip,
    resolveTooltip
}