import AOverlay from '/js/libs/js-AOverlay.js';

export default class AModal extends window.AObject {
    constructor(temp) {
        super();
        this.overlay = new AOverlay(document.body);
        this.overlay.isCloseOverlay(false);
        this.overlay.createOverlay();
        this.overlay.setIndex(2200);
        this.customForm = temp;
    }
    createModal(typeModal, t1 = 'default') {
        var temp = `
            <div class="modal-scroll">
                <div class="modal-con d-f j-c-center  ${ (t1 instanceof Array) ? t1.join(" ") : t1 }">
                    <div class="modal-dialog">
                        <div class="btClose pointer">
                            <span class="atg atg-x"></span>
                        </div>
                    </div>
                </div>
           </div>`;
        this.overlay.overlay.insertAdjacentHTML("afterbegin", temp);
        const b = this.overlay.overlay.querySelector(".modal-dialog");
        const bc1 = this.overlay.overlay.querySelector(".btClose");
        bc1.addEventListener("click", ((e) => {
            this.trigger("Close");
            this.overlay.removeOverlay();
        }).bind(this));
        switch (typeModal) {
            case "CustomForm":
                b.insertAdjacentHTML("beforeend", this.customForm);
                this.CustomContainer = b;
                break;
            case "OK":
                this.AModalOK = new AModalOK(b);
                this.AModalOK.createElement();
                this.AModalOK.bindEvent(".btn-ok", "click", ((ev, mO) => {
                    this.trigger("OK");
                    this.overlay.removeOverlay();
                }).bind(this));
                this.AModalOK.bindEvent(".btn-close", "click", ((ev, mO) => {
                    this.trigger("Close");
                    this.overlay.removeOverlay();
                }).bind(this));
                break;
            case "YesNo":
                break;

        }
    }
    showModal() {
        this.overlay.showOverlay();
    }
    
}

class AModalOK {
    constructor(p) {
        this.parent = p;
    }
    message(str, classes = "") {
        this.mess.innerHTML = str;
        if (classes.length > 0) {
            Array.from(classes.split(" ")).forEach(el => {
                this.mess.classList.add(el);
            })
        }
    }
    title(str, classes = "") {
        this.tit.innerHTML = str;
        if (classes.length > 0) {
            Array.from(classes.split(" ")).forEach(el => {
                this.tit.classList.add(el);
            })
        }
    }
    createElement() {
        const temp = `<div class="d-f f-c modalok">
            <h5>Information</h5>
            <span class="mess-info"></span>
            <div class="ml-auto mt-2">
                <button class="btn btn-primary btn-effect waves-effect waves-float btn-ok">Ok</button>
                <button class="btn btn-secondary btn-effect waves-effect waves-float btn-close">Cancel</button>
            </div>
        </div>`;
        this.parent.insertAdjacentHTML("beforeend", temp);
        this.tit = this.parent.querySelector("h5");
        this.mess = this.parent.querySelector(".mess-info");
    }
    bindEvent(ele, n, f) {
        this.parent.querySelector(ele).addEventListener(n, f.bind(null, this));
    }
}