import { Host, h } from "@stencil/core";
import { BEM } from "../../utils/bem";
export class Snackbar {
    constructor() {
        this.snackbarId = `bal-snackbar-${snackbarIds++}`;
        /**
         * The theme type of the snackbar.
         */
        this.color = '';
        /**
         * The duration of the snackbar
         */
        this.duration = 0;
        /**
         * The subject of the snackbar header
         */
        this.subject = '';
        /**
         * The message of the snackbar as html content
         */
        this.message = '';
        /**
         * The icon of the snackbar header
         */
        this.icon = '';
        /**
         * Label text for the action button
         */
        this.action = '';
        /**
         * @internal Handler for on close event
         */
        this.closeHandler = () => void 0;
        /**
         * @internal Handler for on action button click event
         */
        this.actionHandler = () => void 0;
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
        this.onActionHandler = () => {
            this.balAction.emit(this.snackbarId);
            this.actionHandler();
        };
    }
    async componentWillLoad() {
        if (this.duration > 0) {
            await this.closeIn(this.duration);
        }
    }
    /**
     * Closes the snackbar after the given duration in ms
     */
    async closeIn(duration) {
        this.timer = setTimeout(() => this.close(), duration);
    }
    /**
     * Closes this snackbar
     */
    async close() {
        clearTimeout(this.timer);
        this.balClose.emit(this.snackbarId);
        this.element.remove();
        this.closeHandler();
    }
    // get colorType() {
    //   if (this.color === '') {
    //     return ''
    //   }
    //   return `bal-snackbar__inner--is-${this.color}`
    // }
    // get buttonType(): BalProps.BalButtonColor {
    //   if (this.color === '') {
    //     return 'info'
    //   }
    //   return this.color
    // }
    render() {
        const block = BEM.block('snackbar');
        const detailsEl = block.element('details');
        const buttonWrapperEl = block.element('button-wrapper');
        const subjectId = this.snackbarId + '-subject';
        const messageAttributes = {};
        if (this.message !== undefined && this.message !== '') {
            messageAttributes.innerHTML = this.message;
        }
        const isIconDefined = this.icon !== undefined && this.icon !== null && this.icon !== '';
        const colorIcons = {
            info: 'info-circle',
            primary: 'info-circle',
            warning: 'alert-triangle',
            danger: 'alert-triangle',
            success: 'check-circle',
        };
        const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
        return (h(Host, { key: 'b3915c5a567dc89a8ec7145a7ab98498ca97b66d', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: 'ae6759e051630b2c9fe51c7d24d931e30737376d', class: Object.assign({}, detailsEl.class()) }, h("div", { key: 'dfb41b163dfb1ec063576c487769102bd2c52c40', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: '75a34eb777fbf3c9d8ffdc431a155183888fe5ad', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '7aecaed230c536db0771eb4060a20f8d89b737fa', id: subjectId }, this.subject), h("span", Object.assign({ key: '660cdb87938ee2d5e48bb103dbdb573deafbf088' }, messageAttributes), h("slot", { key: '8a9a874dca0cfce2771f4af4a356e7783d2efada' }), h("span", { key: '988af9ec4c07a0a07f82f0036931cd1dad15a13c', class: "hidden" }))), h("div", { key: 'be82a69b4dc2f4e42ba9f55e7f7af403ce0136cd', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '9b999204c4f1fbdb215161ae08ebec3c8ae21658', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
    }
    static get is() { return "bal-snackbar"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-snackbar.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-snackbar.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalSnackbarColor",
                    "resolved": "\"\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme type of the snackbar."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "''"
            },
            "duration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The duration of the snackbar"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "duration",
                "defaultValue": "0"
            },
            "subject": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The subject of the snackbar header"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "subject",
                "defaultValue": "''"
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The message of the snackbar as html content"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "message",
                "defaultValue": "''"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The icon of the snackbar header"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "''"
            },
            "action": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text for the action button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "action",
                "defaultValue": "''"
            },
            "closeHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Handler for on close event"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => void 0"
            },
            "actionHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Handler for on action button click event"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => void 0"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Specifies the URL of the page the link goes to"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonTarget",
                    "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            }
        };
    }
    static get events() {
        return [{
                "method": "balClose",
                "name": "balClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when snackbar is closed"
                },
                "complexType": {
                    "original": "BalEvents.BalSnackbarCloseDetail",
                    "resolved": "string",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balAction",
                "name": "balAction",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the action button is clicked"
                },
                "complexType": {
                    "original": "BalEvents.BalSnackbarActionDetail",
                    "resolved": "string",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "closeIn": {
                "complexType": {
                    "signature": "(duration: number) => Promise<void>",
                    "parameters": [{
                            "name": "duration",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the snackbar after the given duration in ms",
                    "tags": []
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes this snackbar",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "element"; }
}
let snackbarIds = 0;
