export default class ATab extends window.AObject {
    constructor(tabs, content) {
        super();
        this.tabs = tabs.querySelectorAll(".item");
        this.selTab = null;
        this.lockTabs = Array.from([]);
        this.ctabs = Array.from(content.querySelectorAll(".tabcontent"));
        this.tabs.forEach((e, i) => {
            if (e.classList.contains("active")) {
                this.selectedTab(i);
            }
            this.ctabs[i].classList.add("fade");
            e.addEventListener("click", this.eventTabClick.bind(this, e, i));
        });
    }
    eventTabClick(e, num) {
        if (e.hasAttribute("disabled") || e.classList.contains("active")) {
            return;
        }
        this.selectedTab(num);
    }
    selectedTab(id) {
        if (this.selTab != null) {
            if (this.lockTabs.length > 0) {
                if (this.lockTabs.includes(this.selTab)){
                    this.disableTab(this.selTab);
                }
            }
            this.tabs[this.selTab].classList.remove("active");
            this.ctabs[this.selTab].style.opacity = 0;
            window.requestTimeout(((num) => {
                this.ctabs[num].classList.remove("show");
                this.setTab(id);
            }).bind(this, this.selTab), 100, window.registerCancel);
        } else {
            this.setTab(id);
        }
    }
    setTab(id) {
        this.ctabs[id].classList.add("show");
        window.requestTimeout((() => {
            var f = function (ev) {
                if (ev.propertyName == "opacity") {
                    this.trigger("changed", {"tabIndex": id})
                    ev.target.removeEventListener("transitionend", f, false);
                }
            }
            this.ctabs[id].addEventListener('transitionend', f.bind(this), false);
            this.ctabs[id].style.opacity = 1;
        }).bind(this), 50, window.registerCancel);
        this.tabs[id].classList.add("active");
        this.selTab = id;
    }
    enableTab(id) {
        this.tabs[id].removeAttribute("disabled");
    }
    disableTab(id) {
        this.tabs[id].setAttribute("disabled", "");
    }
}