import { Host, h } from "@stencil/core";
import gsap from "gsap";
import { MOBILE_SIZE } from "../../constants.js";
const mm = gsap.matchMedia();
export class CpslAuthModal {
    constructor() {
        this.hasFooter = undefined;
        this.isMobile = undefined;
        this.enterTransitionDuration = 0.15;
        this.exitTransitionDuration = 0.15;
        this.noOverlay = undefined;
        this.open = undefined;
        this.zIndexOverride = undefined;
    }
    toggleModal() {
        if (this.hasAnimatedIn) {
            this.handleAnimation();
        }
    }
    componentDidLoad() {
        this.handleAnimation();
        this.hasAnimatedIn = true;
        mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
            gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
            this.isMobile = false;
        });
        mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
            gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
            this.isMobile = true;
        });
        this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
        this.footerSlotEl.addEventListener('slotchange', () => {
            if (this.footerSlotEl.assignedNodes().length >= 1) {
                this.hasFooter = true;
            }
            else {
                this.hasFooter = false;
            }
        });
    }
    handleAnimation() {
        if (typeof window !== 'undefined') {
            if (this.open) {
                if (window.innerWidth >= MOBILE_SIZE + 1) {
                    gsap
                        .timeline({
                        onStart: () => {
                            this.cpslModalEntering.emit();
                        },
                        onComplete: () => {
                            this.cpslModalEntered.emit();
                        },
                    })
                        .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
                        .to(this.modalWrapperEl, {
                        scale: 1,
                        opacity: 1,
                        duration: this.enterTransitionDuration,
                    });
                }
                else {
                    gsap
                        .timeline({
                        onStart: () => {
                            this.cpslModalEntering.emit();
                        },
                        onComplete: () => {
                            this.cpslModalEntered.emit();
                        },
                    })
                        .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
                        .to(this.modalWrapperEl, {
                        yPercent: -100,
                        duration: this.enterTransitionDuration,
                    });
                }
            }
            else {
                if (window.innerWidth >= MOBILE_SIZE + 1) {
                    gsap
                        .timeline({
                        onStart: () => {
                            this.cpslModalExiting.emit();
                        },
                        onComplete: () => {
                            var _a;
                            this.cpslModalExited.emit();
                            (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
                        },
                    })
                        .to(this.modalWrapperEl, {
                        scale: 0.8,
                        opacity: 0,
                        duration: this.exitTransitionDuration,
                    });
                }
                else {
                    gsap
                        .timeline({
                        onStart: () => {
                            this.cpslModalExiting.emit();
                        },
                        onComplete: () => {
                            var _a;
                            this.cpslModalExited.emit();
                            (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
                        },
                    })
                        .to(this.modalWrapperEl, {
                        yPercent: 0,
                        duration: this.exitTransitionDuration,
                    })
                        .set(this.modalContainerEl, { y: 0 });
                }
            }
        }
    }
    get footerEl() {
        return this.el.shadowRoot.getElementById('modal-footer');
    }
    get modalWrapperEl() {
        return this.el.shadowRoot.getElementById('modal-wrapper');
    }
    get modalContainerEl() {
        return this.el.shadowRoot.getElementById('modal-container');
    }
    get footerSlotEl() {
        return this.footerEl.querySelectorAll('slot')[0];
    }
    get Modal() {
        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("cpsl-card", { id: "modal-body-card", class: { 'modal-body-card': true, 'body': true }, part: "modal-body-card" }, h("slot", { name: "body" }), this.isMobile && (h("div", { class: "mobile-footer", part: "modal-mobile-footer" }, h("slot", { name: "footer" })))), h("cpsl-card", { id: "modal-footer", part: "modal-footer", class: { 'footer-hidden': !this.hasFooter, 'modal-body-card': true }, style: { display: !this.isMobile ? 'block' : 'none' } }, h("slot", { name: "footer" }))));
    }
    render() {
        if (this.noOverlay) {
            return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
        }
        return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
    }
    static get is() { return "cpsl-auth-modal"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-auth-modal.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-auth-modal.css"]
        };
    }
    static get properties() {
        return {
            "enterTransitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the modal entering.\nDefault is .15."
                },
                "attribute": "enter-transition-duration",
                "reflect": false,
                "defaultValue": "0.15"
            },
            "exitTransitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the modal exiting.\nDefault is .15."
                },
                "attribute": "exit-transition-duration",
                "reflect": false,
                "defaultValue": "0.15"
            },
            "noOverlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`."
                },
                "attribute": "no-overlay",
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the modal."
                },
                "attribute": "open",
                "reflect": false
            },
            "zIndexOverride": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Override z-index."
                },
                "attribute": "z-index-override",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "hasFooter": {},
            "isMobile": {}
        };
    }
    static get events() {
        return [{
                "method": "cpslModalEntering",
                "name": "cpslModalEntering",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when enter animation starts."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalEntered",
                "name": "cpslModalEntered",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when enter animation finishes."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalExiting",
                "name": "cpslModalExiting",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation starts."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalExited",
                "name": "cpslModalExited",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation finishes."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalRequestClose",
                "name": "cpslModalRequestClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation finishes."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "toggleModal"
            }];
    }
}
//# sourceMappingURL=cpsl-auth-modal.js.map
