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: 'aa57c191d71ce84966dcb0bd90d80f372257aaaa' }, h("div", { key: '0899ae948244715efe7dcd68318a572edcd805d7', class: cls(`dialog-${this.type}`, { 'alert-interval-progress': this.interval }) }, this.header && h("h4", { key: 'd6151927ec60086de5fe175f885d976155376eb3' }, tinyMDtoHTML(this.header)), this.message && h("p", { key: 'a2e15038fc06828abf37148dadece1376917997d' }, tinyMDtoHTML(this.message))), h("x-dock", { key: '13a6a06982975bd94b24c20ef76881c4632c9675', block: true }, this.type == 'confirm' && h("x-button", { key: '01452b43a26cd7e932213a57572fc8de9afb40bf', block: true, loading: this.buttonConfirmLoading && this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.confirmEvent.emit() }, this.buttonConfirmYesText), this.type == 'confirm' && h("x-button", { key: '803704b896ca44a33769ed671c8e6ef98159453f', block: true, loading: this.buttonConfirmLoading && !this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.refuseEvent.emit() }, this.buttonConfirmNoText), this.type != 'confirm' && h("x-button", { key: 'e41be7db5813380a3a1ef1f38d8e1da4ff29d188', block: true, loading: this.intervalActive, onClick: () => this.closeEvent.emit() }, this.buttonCloseText, h("span", { key: '3e3a60e5e9aa0468f00e852e70df6a75f61f665b', class: cls({ 'button--interval-progress': 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": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On close event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "confirmEvent",
                "name": "confirm",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On confirm event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "refuseEvent",
                "name": "refuse",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On refuse event emitter"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
