import { DomUtil, Util } from "@ema/core";
export class Modal {
    constructor() {
        this.fadeDuration = 150;
        this.html = '';
        this.width = '80%';
        this.centerVertical = true;
        this.centerContent = false;
        this.allowClose = 'true';
        this.id = Util.getUUID();
    }
    async show(html) {
        this.host.querySelectorAll('.modal-check')[0]['checked'] = true;
        if (html)
            this.html = html;
        this.postRender();
        setTimeout(() => {
        }, 210);
    }
    async hide() {
        this.host.querySelectorAll('.modal-check')[0]['checked'] = false;
    }
    modalContentChangeHandler() {
        this.html = this.modalContent;
    }
    componentWillLoad() {
        if (this.modalContent)
            this.html = this.modalContent;
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        this.modalWrapper = this.host.querySelector('.modal-wrapper');
        this.modalHeader = this.host.querySelector('.modal-header');
        this.modal = this.host.querySelector('.modal');
        this.modalBackground = this.host.querySelector('.modal-background');
        this.content = this.host.querySelector('.modal-content-render');
        if (this.html) {
            this.host.getElementsByClassName('html-render')[0].innerHTML = this.html;
        }
        setTimeout(() => {
            let headerH = this.modalHeader['offsetHeight'];
            if (this.modal['offsetHeight'] > (this.content['offsetHeight'] + headerH)) {
                let correction = this.modal['offsetHeight'] - (this.content['offsetHeight'] + headerH);
                this.modal['style'].height = (this.modal['offsetHeight'] - correction) + 'px';
            }
            this.modal['style'].width = this.width;
            if (this.height) {
                this.modal['style'].height = this.height;
            }
            if (this.centerContent) {
                DomUtil.addClass(this.content, 'modal-content-centered');
                DomUtil.addClass(this.modalHeader, 'modal-header-centered');
            }
            if (!this.centerVertical) {
                DomUtil.addClass(this.modal, 'modal-align-top');
            }
            if (!this.modalTitle) {
                DomUtil.addClass(this.modalHeader, 'modal-header-no-title');
            }
            if (this.allowClose == 'false') {
                this.host.querySelectorAll('.modal-background')[0].setAttribute('for', '');
            }
            else {
                this.host.querySelectorAll('.modal-background')[0].setAttribute('for', 'modal-' + this.id);
            }
        }, 100);
    }
    render() {
        return (h("div", { class: 'modal-wrapper' },
            h("input", { type: "checkbox", id: 'modal-' + this.id, class: 'modal-check' }),
            h("label", { htmlFor: 'modal-' + this.id, class: "modal-background" }),
            h("div", { class: "modal" },
                h("div", { class: "modal-header" },
                    this.modalTitle &&
                        h("div", { class: "modal-title" }, this.modalTitle),
                    this.allowClose == 'true' &&
                        h("label", { htmlFor: 'modal-' + this.id },
                            h("img", { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC", width: "16", height: "16", alt: "" }))),
                h("div", { class: "modal-content-render" }, this.html !== '' ? (h("span", { class: 'html-render' })) : (h("slot", null))))));
    }
    static get is() { return "ema-modal"; }
    static get properties() { return {
        "allowClose": {
            "type": String,
            "attr": "allow-close"
        },
        "centerContent": {
            "type": Boolean,
            "attr": "center-content"
        },
        "centerVertical": {
            "type": Boolean,
            "attr": "center-vertical"
        },
        "height": {
            "type": String,
            "attr": "height"
        },
        "hide": {
            "method": true
        },
        "host": {
            "elementRef": true
        },
        "html": {
            "state": true
        },
        "modalContent": {
            "type": String,
            "attr": "modal-content",
            "watchCallbacks": ["modalContentChangeHandler"]
        },
        "modalTitle": {
            "type": String,
            "attr": "modal-title"
        },
        "show": {
            "method": true
        },
        "width": {
            "type": String,
            "attr": "width"
        }
    }; }
    static get style() { return "/**style-placeholder:ema-modal:**/"; }
}
