import { Host, h } from "@stencil/core";
const TOAST_CONTEXT_ICONS = {
    danger: 'M24 4C12.96 4 4 12.95 4 24s8.96 20 20 20 20-8.95 20-20S35.04 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z',
    info: 'M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z',
    success: 'M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z',
    warn: 'M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z'
};
export class Toast {
    constructor() {
        /**
         * The toast context which defaults to intro.
         * Options are: "success"`, `"danger"`, `"warn"`, and `"info"`.
         */
        this.context = 'info';
        this.autoDismiss = null;
    }
    async componentDidLoad() {
        if (this.context !== 'danger' && this.context !== 'warn') {
            this.autoDismiss = new Promise(resolve => {
                this.autoTimer = window.setTimeout(() => {
                    resolve(this.dismiss());
                }, Toast.toastTime);
            });
        }
    }
    async componentDidRender() {
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.active = true;
                const closeBtn = this.element.querySelector('anj-button button');
                closeBtn.focus();
                resolve();
            });
        });
    }
    /**
     * Dismiss the toast
     */
    async dismiss() {
        this.active = false;
        window.clearTimeout(this.autoTimer);
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.anjToastDidDismiss.emit(this.toConfig());
                this.element.remove();
                resolve();
            }, Toast.closeDelay);
        });
    }
    toConfig() {
        return {
            header: this.header,
            message: this.message,
            context: this.context
        };
    }
    render() {
        return (h(Host, { class: { 'anj-active': true } },
            h("div", { class: "anj-toast-content" },
                this.header ? h("h5", { class: "anj-toast-header" }, this.header) : '',
                this.message),
            h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" },
                h("path", { d: TOAST_CONTEXT_ICONS[this.context] })),
            h("anj-button-close", { free: true, context: "floating", onClick: () => this.dismiss() })));
    }
    static get is() { return "anj-toast"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["toast.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["toast.css"]
    }; }
    static get properties() { return {
        "context": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "ToastContext",
                "resolved": "\"danger\" | \"info\" | \"success\" | \"warn\"",
                "references": {
                    "ToastContext": {
                        "location": "import",
                        "path": "../../../types/types"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "The toast context which defaults to intro.\nOptions are: \"success\"`, `\"danger\"`, `\"warn\"`, and `\"info\"`."
            },
            "attribute": "context",
            "reflect": true,
            "defaultValue": "'info'"
        },
        "message": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The message to display"
            },
            "attribute": "message",
            "reflect": false
        },
        "header": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The title, which is optional"
            },
            "attribute": "header",
            "reflect": false
        },
        "autoDismiss": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "Promise<void>",
                "resolved": "Promise<void>",
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "null"
        }
    }; }
    static get states() { return {
        "active": {}
    }; }
    static get events() { return [{
            "method": "anjToastDidDismiss",
            "name": "anjToastDidDismiss",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the checked state is changed"
            },
            "complexType": {
                "original": "ToastConfig",
                "resolved": "ToastConfig",
                "references": {
                    "ToastConfig": {
                        "location": "import",
                        "path": "../../../types/types"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "dismiss": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Dismiss the toast",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
Toast.closeDelay = 350;
Toast.toastTime = 4000;
