import { Component, Host, h, Prop, State, Watch, Listen, Event } from '@stencil/core';
import Button from '../Button/Button';
export class SiteModal {
    constructor() {
        this.open = false;
        this.visible = false;
        this.OPEN_DELAY = 500;
        this.CLOSE_DELAY = 500;
        this.close = () => {
            this.visible = false;
            this.hideBackdrop();
            setTimeout(() => {
                this.open = false;
            }, this.CLOSE_DELAY);
        };
        this.openBackdrop = () => {
            const backdrop = document.createElement('div');
            backdrop.className = 'modal__backdrop';
            document.body.appendChild(backdrop);
            this.initBackdrop(backdrop);
            this.backdropEl = backdrop;
            requestAnimationFrame(() => {
                backdrop.classList.add('in');
            });
        };
        this.hideBackdrop = () => {
            if (!this.backdropEl) {
                return;
            }
            this.backdropEl.classList.add('out');
            setTimeout(() => {
                var _a;
                document.body.removeChild(this.backdropEl);
                this.backdropEl = null;
                this.modalClose && this.modalClose();
                (_a = this.onModalClose) === null || _a === void 0 ? void 0 : _a.emit();
            }, this.CLOSE_DELAY);
        };
        this.checkBackdrop = () => { };
        this.initBackdrop = (el) => {
            el.addEventListener('click', (_e) => {
                this.close();
            });
        };
    }
    componentDidLoad() {
        this.checkBackdrop();
    }
    handleKeyUp(e) {
        if (this.open && e.key === 'Escape') {
            this.close();
        }
    }
    openChanged() {
        if (this.open && !this.backdropEl) {
            this.openBackdrop();
        }
        else if (!this.open && this.backdropEl) {
            this.hideBackdrop();
        }
        requestAnimationFrame(() => {
            this.visible = this.open;
        });
    }
    render() {
        return (h(Host, { style: {
                display: this.open ? 'block' : 'none',
            } },
            h("div", { class: `modal__wrap${this.visible ? ` in` : ``}` },
                h("div", { class: `modal__content` },
                    h(Button, { class: "modal__close-button", onClick: this.close },
                        h("ion-icon", { name: "close" })),
                    h("div", { class: "modal__body" },
                        h("slot", null))))));
    }
    static get is() { return "site-modal"; }
    static get originalStyleUrls() { return {
        "$": ["site-modal.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["site-modal.css"]
    }; }
    static get properties() { return {
        "open": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "open",
            "reflect": false,
            "defaultValue": "false"
        },
        "modalClose": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "() => void",
                "resolved": "() => void",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "visible": {}
    }; }
    static get events() { return [{
            "method": "onModalClose",
            "name": "modalClose",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "open",
            "methodName": "openChanged"
        }]; }
    static get listeners() { return [{
            "name": "keyup",
            "method": "handleKeyUp",
            "target": "window",
            "capture": false,
            "passive": false
        }]; }
}
