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: 'aff9ca595700e4f6906544c7bd8506175e8b8e9e', class: cls(`dialog-${this.type}`, { 'alert-interval-progress': this.interval }) }, h("div", { key: '970c901155347760c41f1b34a095f860739f056a' }, this.header && h("h4", { key: '64ecdc346fdd4d9508a71f887447517b7d4dd109' }, tinyMDtoHTML(this.header)), this.message && h("p", { key: '96a93c507b81f39b72be79b78fb0dbbd68c0b3c2' }, tinyMDtoHTML(this.message)), this.type == 'confirm' && h("div", { key: 'c65f420b8c40c675d8ecb27348214d07062bd1c2', class: "buttons" }, h("x-button", { key: '162c6c3c9aa17c12858ae740e704975ef2b9f52d', block: true, loading: this.buttonConfirmLoading && this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.confirmEvent.emit() }, this.buttonConfirmYesText), h("x-button", { key: '7789005a33cc1d709c6d331cc26667bc774b4589', block: true, loading: this.buttonConfirmLoading && !this.buttonConfirmResult, disabled: this.buttonConfirmLoading, onClick: () => this.refuseEvent.emit() }, this.buttonConfirmNoText)), this.type != 'confirm' && h("x-button", { key: 'bfb42ecf2e2cf6dcca1f24e08fccc40bc3cece49', color: "primary", loading: this.intervalActive, onClick: () => this.closeEvent.emit() }, this.buttonCloseText, h("span", { key: 'bd7139c81892263f77a4128a19da2269b507a02c', 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"; }
}
