// retoor <retoor@molodetz.nl>

export class ProfileTabs {
    constructor(root) {
        this.root = root;
        this.more = root.querySelector(".profile-tabs-more");
        this.tabs = Array.from(root.querySelectorAll(".profile-tab")).filter(
            (tab) => tab !== this.more
        );
        if (!this.more || !this.tabs.length) {
            return;
        }
        this.overflow = [];
        this.root.classList.add("tabs-managed");
        this.more.addEventListener("click", (event) => this.open(event));
        this._onResize = () => this.layout();
        window.addEventListener("resize", this._onResize);
        this.layout();
    }

    layout() {
        this.tabs.forEach((tab) => {
            tab.hidden = false;
        });
        this.more.hidden = false;

        if (this._fits()) {
            this.more.hidden = true;
            this.overflow = [];
            return;
        }

        while (!this._fits()) {
            const victim = this.tabs
                .filter((tab) => !tab.hidden && !tab.classList.contains("active"))
                .pop();
            if (!victim) {
                break;
            }
            victim.hidden = true;
        }

        this.overflow = this.tabs.filter((tab) => tab.hidden);
    }

    _fits() {
        return this.root.scrollWidth <= this.root.clientWidth;
    }

    open(event) {
        event.preventDefault();
        event.stopPropagation();
        const items = this.overflow.map((tab) => ({
            icon: tab.dataset.menuIcon || "",
            label: tab.dataset.menuLabel || tab.textContent.trim(),
            onSelect: () => tab.click(),
        }));
        if (!items.length) {
            return;
        }
        const rect = this.more.getBoundingClientRect();
        window.app.contextMenu.open(rect.left, rect.bottom + 4, items);
    }
}
