import { Host, h } from "@stencil/core";
import { cls, tinyMDtoHTML } from "../../utils/helpers";
import { Lang } from "../../services/lang";
export class XDialog {
    constructor() {
        this.type = 'default';
        this.header = undefined;
        this.message = undefined;
        this.buttonCloseText = Lang.get('alert.close');
        this.buttonConfirmYesText = Lang.get('alert.confirm-yes');
        this.buttonConfirmNoText = Lang.get('alert.confirm-no');
        this.buttonConfirmLoading = undefined;
        this.buttonConfirmResult = undefined;
        this.interval = undefined;
        this.intervalActive = undefined;
    }
    /**
     * Component will load
     */
    componentWillLoad() {
        this.intervalActive = Boolean(this.interval);
    }
    /**
     * Component did load
     */
    componentDidLoad() {
        const buttonProgress = this.el.querySelector(".button--interval-progress");
        if (this.interval && buttonProgress) {
            buttonProgress.style.transitionDuration = `${this.interval}s`;
        }
        setTimeout((() => {
            this.startIntervalCount();
        }).bind(this), 10);
    }
    /**
     * Handler of counter interval
     */
    startIntervalCount() {
        if (this.interval) {
            this.el.querySelector(".button--interval-progress").classList.add("button--has-interval");
            this.intervalActive = true;
            window.setTimeout(() => {
                this.closeEvent.emit();
                this.intervalActive = false;
            }, this.interval * 1000);
        }
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: 'f58fdb2a44608ad0f203578da95dc00c6f106c13', class: cls(`dialog-${this.type}`, { 'alert-interval-progress': this.interval }) }, h("div", { key: 'b461af2dd3dbc96421d5ca570dd4c2dd74a2dc11' }, this.header && h("h4", { key: '28729d3975022cdc86d9325ae001e18544a01c5a' }, tinyMDtoHTML(this.header)), this.message && h("p", { key: 'e1bd5b9af6d04a9b14aaa0e801095adc5b076cb2' }, tinyMDtoHTML(this.message)), this.type == 'confirm' && h("div", { key: 'dd95dc9cd3381a9d0f73e3b9c8bf5b02b96814ec', class: "buttons" }, h("x-button", { key: '55e58c4f12385de1f2e9c5c812ab3aa82b1afd2e', block: true, loading: this.buttonConfirmLoading && this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.confirmEvent.emit() }, this.buttonConfirmYesText), h("x-button", { key: '4b5dcdca1193b80b4f63f86c9babbfd354b12314', block: true, loading: this.buttonConfirmLoading && !this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.refuseEvent.emit() }, this.buttonConfirmNoText)), this.type != 'confirm' && h("x-button", { key: '2383226dd81c890231c7bf55472e023ab6b9cd1c', color: "primary", loading: this.intervalActive, onClick: () => this.closeEvent.emit() }, this.buttonCloseText, h("span", { key: '763503a49264329e4fbf24d2e3b67d1687efe267', class: { 'button--interval-progress': Boolean(this.interval) } }))));
    }
    static get is() { return "x-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get assetsDirs() { return ["../../resources/images"]; }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DialogType",
                    "resolved": "\"confirm\" | \"danger\" | \"default\" | \"error\" | \"exception\" | \"failure\" | \"forbidden\" | \"invalid\" | \"missing\" | \"no-result\" | \"payment\" | \"success\" | \"unknown\"",
                    "references": {
                        "DialogType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-dialog/component.tsx",
                            "id": "src/components/x-dialog/component.tsx::DialogType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element style type"
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "header": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element header text"
                },
                "attribute": "header",
                "reflect": false
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element message text"
                },
                "attribute": "message",
                "reflect": false
            },
            "buttonCloseText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element confirmation close button text"
                },
                "attribute": "button-close-text",
                "reflect": false,
                "defaultValue": "Lang.get('alert.close')"
            },
            "buttonConfirmYesText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element confirmation yes button text"
                },
                "attribute": "button-confirm-yes-text",
                "reflect": false,
                "defaultValue": "Lang.get('alert.confirm-yes')"
            },
            "buttonConfirmNoText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element confirmation no button text"
                },
                "attribute": "button-confirm-no-text",
                "reflect": false,
                "defaultValue": "Lang.get('alert.confirm-no')"
            },
            "buttonConfirmLoading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element confirmation loading state"
                },
                "attribute": "button-confirm-loading",
                "reflect": false
            },
            "buttonConfirmResult": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element confirmation result state"
                },
                "attribute": "button-confirm-result",
                "reflect": false
            },
            "interval": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element interval time in seconds to auto-close"
                },
                "attribute": "interval",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "intervalActive": {}
        };
    }
    static get events() {
        return [{
                "method": "closeEvent",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On close event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "confirmEvent",
                "name": "confirm",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On confirm event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "refuseEvent",
                "name": "refuse",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On refuse event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
