import ATab from '/js/libs/js-ATab.js'

export default class AWizard extends ATab {
    constructor(content) {
        super(null, content, false);
        this.isRender = false;
        this.isStopNextPage = false;
        this.layBtn = `<div class="form-group mb-4">
                                <button type="button" class="btn btn-effect btn-primary mt-2  waves-effect waves-float d-f a-i-center btnNext">
                                    Next
                                </button>
                            </div>`;
        this.layBtn1 = `<div class="form-group d-f mb-4">
                                <button type="button" class="btn btn-effect btn-primary mt-2  waves-effect waves-float d-f a-i-center btnNext">
                                    Next
                                </button>
                                <button type="button" class="btn btn-effect btn-primary mt-2 ml-2  waves-effect waves-float d-f a-i-center btnBack">
                                    Back
                                </button>
                                <button type="button" class="btn btn-effect btn-primary mt-2 ml-2  waves-effect waves-float d-f a-i-center btnCancel">
                                    Cancel
                                </button>
                            </div>`;
        this.layBtn2 = `<div class="form-group d-f mb-4">
                                <button type="button" class="btn btn-effect btn-primary mt-2  waves-effect waves-float d-f a-i-center btnFinish">
                                    Finish
                                </button>
                                <button type="button" class="btn btn-effect btn-primary mt-2 ml-2  waves-effect waves-float d-f a-i-center btnBack">
                                    Back
                                </button>
                                <button type="button" class="btn btn-effect btn-primary mt-2 ml-2  waves-effect waves-float d-f a-i-center btnCancel">
                                    Cancel
                                </button>
                            </div>`;
        
    }
    showPage(i) {
        this.ctabs[i].removeAttribute("hide");
    }
    hidePage(i) {
        this.ctabs[i].setAttribute("hide", "");
    }
    renderTab() {
        if (this.isRender) return;
        let l = this.ctabs.length;
        if (l > 1) {
            this.setLayout(0, this.layBtn);
        }
        if (l > 2) {
            for (var i = 1; i < l - 1; i++) {
                this.setLayout(i, this.layBtn1);
            }
        }
        this.setLayout(l - 1, this.layBtn2);

        this.tabContents.querySelectorAll(".btnNext").forEach((el, idx) => {
            el.addEventListener("click", ((e) => { this.btnNext_Click(e, idx); }).bind(this));
        });
        this.tabContents.querySelectorAll(".btnBack").forEach((el, idx) => {
            el.addEventListener("click", ((e) => { this.btnBack_Click(e, idx); }).bind(this));
        });
        this.tabContents.querySelectorAll(".btnFinish").forEach((el) => {

        });
        this.tabContents.querySelectorAll(".btnCancel").forEach((el) => {
            el.addEventListener("click", ((e) => { this.btnCancel_Click(e); }).bind(this));
        });
        this.isRender = true;
    }
    checkSelectedNext(idx) {
        while (idx + 1 < this.ctabs.length) {
            if (this.ctabs[idx + 1].hasAttribute("hide")) {
                idx += 1;
            } else {
                return idx + 1;
            }
        };
        return 0;
    }
    checkSelectedBack(idx) {
        while (idx >= 0) {
            if (this.ctabs[idx].hasAttribute("hide")) {
                idx -= 1;
            } else {
                return idx;
            }
        };
        return idx;
    }
    setLayout(idx, layout) {
        this.ctabs[idx].insertAdjacentHTML('beforeend', layout);
    }
    setNameButton(id, name) {

    }
    btnCancel_Click(e) {
        this.selectedTab(0);
    }
    btnNext_Click(e, idx) {
        this.trigger("onBeforeNext", { "currentPage": this.ctabs[idx], "indexPage": idx, "currentButton": e.currentTarget });
        if (this.isStopNextPage) return;
        this.selectedTab(this.checkSelectedNext(idx));
        
        this.trigger("onAfterNext");
    }
    btnBack_Click(e, idx) {
        this.selectedTab(this.checkSelectedBack(idx));
    }
    btnFinish_Click(e) {

    }
}