import {
    computePosition,
    flip,
    shift,
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';

function update_position(button, dropdown_div) {
    const placement = button.dataset.dropdownDirection;
    computePosition(button, dropdown_div, {
        placement: placement,
        middleware: [
            flip(),
            shift()
        ],
    }).then(({x, y}) => {
        Object.assign(dropdown_div.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
    })
}

function setup_dropdown(button) {
    const dropdown_div = document.querySelector("#" + button.dataset.dropdownTarget);
    update_position(button, dropdown_div);
    return function () {
        if (dropdown_div.style.display == "none") {

            dropdown_div.style.removeProperty("display");
            if (button.dataset.dropdownMotion == "expand-down") {
                dropdown_div.style.display = "block";
                dropdown_div.style.maxHeight = "0px";

                button.style.borderBottomLeftRadius = "0px";
                button.style.borderBottomRightRadius = "0px";
            } 

            update_position(button, dropdown_div);

            setTimeout(function () {
                if (button.dataset.dropdownMotion == "expand-down") {
                    dropdown_div.style.maxHeight = "100px";
                } else {
                    dropdown_div.style.opacity = 1;
                }
            }, 110);
        } else {
            if (button.dataset.dropdownMotion == "expand-down") {
                dropdown_div.style.maxHeight = "0px";
            } else {
                dropdown_div.style.opacity = 0;
            }
            setTimeout(function () {
                if (button.dataset.dropdownMotion == "expand-down") {
                    button.style.removeProperty("border-bottom-left-radius");
                    button.style.removeProperty("border-bottom-right-radius");
                }
                dropdown_div.style.display = "none";
            }, 200);
        }
    };
}

function register_dropdowns() {
    document.querySelectorAll(".dropdown-button").forEach(function (el) {
        el.addEventListener("click", setup_dropdown(el));
    });
}

export {register_dropdowns}