export function showElement(element: HTMLElement, expand = true) {
    const transitionId = element.getAttribute("data-pad-visibility-change-id")
    if (transitionId) clearTimeout(parseInt(transitionId));

    element.classList.remove("pad-hidden");
    element.classList.remove("pad-hiding");
    element.style.opacity = '0';
    element.style.transition = "opacity 0.5s, max-height 0.5s";

    if (expand) {
        element.style.maxHeight = '0';
        element.style.overflow = "hidden";
    }
    setTimeout(() => {
        element.style.opacity = '';
        if (expand) element.style.maxHeight = element.scrollHeight + "px";
    });
    const newTransitionId = setTimeout(() => {
        element.style.transition = '';
        if (expand) {
            element.style.maxHeight = '';
            element.style.overflow = '';
        }
    }, 510);

    element.setAttribute("data-pad-visibility-change-id", newTransitionId.toString());
}

export function hideElement(element: HTMLElement, expand = true) {
    const transitionId = element.getAttribute("data-pad-visibility-change-id")
    if (transitionId) clearTimeout(parseInt(transitionId));

    element.style.transition = "opacity 0.5s, max-height 0.5s";
    element.classList.add("pad-hiding");
    if (expand){
        element.style.maxHeight = element.scrollHeight + "px";
        element.style.overflow = "hidden";
    }
    setTimeout(() => {
        element.style.opacity = '0';
        if (expand) element.style.maxHeight = '0';
    });
    const newTransitionId = setTimeout(() => {
        element.style.transition = '';
        element.style.opacity = '';
        if (expand) {
            element.style.maxHeight = '';
            element.style.overflow = '';
        }
        element.classList.add("pad-hidden");
        element.classList.remove("pad-hiding");
    }, 510);

    element.setAttribute("data-pad-visibility-change-id", newTransitionId.toString());
}

export function toggleElement(element: HTMLElement, expand = true) {
    isElementVisible(element) ? hideElement(element, expand) : showElement(element, expand);
}

export function setElementVisibility(element: HTMLElement, visible: boolean, expand = true) {
    if (isElementVisible(element) !== visible) {
        visible ? showElement(element, expand) : hideElement(element, expand);
    }
}

export function isElementVisible(element: HTMLElement) {
    return !(element.classList.contains("pad-hidden") || element.classList.contains("pad-hiding"));
}