/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { Host, h } from "@stencil/core";
import cn from "../../global/lib/cn";
import { AddIcon } from "../../global/assets/add-icon";
export class FormInput {
    constructor() {
        this.message = '';
        this.closeText = '';
        this.isError = false;
        this.successMessage = '';
        this.isOpened = false;
        this.internalMessage = '';
        this.closeDialog = () => {
            this.isOpened = false;
            setTimeout(() => {
                this.internalMessage = '';
                if (this.dialogClosed)
                    this.dialogClosed();
            }, 310);
        };
    }
    async componentWillLoad() {
        this.form.openDialog = () => (this.isOpened = true);
        if (this.internalMessage) {
            this.internalMessage = this.message;
            setTimeout(() => (this.isOpened = true), 100);
        }
    }
    async changeErrorMiddleware(newError) {
        if (newError && newError !== this.internalMessage) {
            this.internalMessage = newError;
            setTimeout(() => (this.isOpened = true), 100);
        }
        else
            this.isOpened = false;
    }
    render() {
        const [locale] = this.form.getFormLocale();
        const dialogContainerIdentifier = cn('form-dialog-modal dialog-drop-container', {
            'dialog-drop-container-opened': this.isOpened,
            'dialog-drop-container-error': this.isError,
        });
        const dialogWrapperIdentifier = cn('dialog-wrapper', {
            'dialog-wrapper-opened': this.isOpened,
        });
        const buttonIdentifiers = cn('dialog-close-button', { 'dialog-close-button-error': this.isError });
        const successContainerIdentifier = 'form-success-container';
        const successContainerIdentifierIcon = 'form-success-container-icon';
        const dialogContentIdentifier = cn('dialog-content');
        const closeButtonIdentifier = 'dialog-close-icon-button';
        const closeButtonIdentifierIcon = 'dialog-close-icon-button-icon';
        return (h(Host, { key: '8a3cdbf65c563bcbb6c4c05879d3bb047dcdf578', translate: "no" }, h("div", { key: 'ce49a5bffd6a5c7cca6aae6ab3ac4901eb45271d', part: dialogContainerIdentifier, dir: locale.sharedFormLocales.direction, class: dialogContainerIdentifier }, h("div", { key: '22ca629ea0e8525bf633aefd01cb3c4b3b3493c9', part: dialogWrapperIdentifier, class: dialogWrapperIdentifier }, h("button", { key: '57be63c19a44c643a64e4a9fea7b4826db9f8f3a', "aria-label": "Close the dialog", part: closeButtonIdentifier, onClick: this.closeDialog, type: "button", class: closeButtonIdentifier }, h(AddIcon, { key: 'a1706eb1cad4c33589a0f560598be8efeba7cdd1', class: closeButtonIdentifierIcon, part: closeButtonIdentifierIcon })), h("div", { key: 'ce32d616e07f879041d98a678c64a882016f9795', part: dialogContentIdentifier, class: dialogContentIdentifier }, this.isError && this.internalMessage, h("div", { key: 'ae21e822ba03984f2f2e7af997d33fdcbec7d6fb', style: { display: this.isError ? 'none' : 'block' } }, h("div", { key: 'ce69ae6cd0a209f7363f6770df41de04b5571fd9', class: successContainerIdentifier, part: successContainerIdentifier }, h("svg", { key: '90464c21230bdc993b3353cf0c527bc78dcf62ce', fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", part: successContainerIdentifierIcon, class: successContainerIdentifierIcon }, h("path", { key: '44d0319a4d66dd19f68d4eb08b7e259673f79161', d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { key: '9cdfb71a1258cb78f7b3e23af71a90d69427f72a', d: "m9 12 2 2 4-4" })), this.successMessage))), h("button", { key: '46ff97b11b57f6c7f91f2523a39b9537816887ae', part: buttonIdentifiers, type: "button", onClick: this.closeDialog, class: buttonIdentifiers }, this.closeText)))));
    }
    static get is() { return "form-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-dialog.css"]
        };
    }
    static get properties() {
        return {
            "message": {
                "type": "string",
                "attribute": "message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "form": {
                "type": "unknown",
                "attribute": "form",
                "mutable": false,
                "complexType": {
                    "original": "FormHook<any>",
                    "resolved": "FormHook<any>",
                    "references": {
                        "FormHook": {
                            "location": "import",
                            "path": "~features/form-hook",
                            "id": "src/features/form-hook/index.ts::FormHook"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "closeText": {
                "type": "string",
                "attribute": "close-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "isError": {
                "type": "boolean",
                "attribute": "is-error",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "successMessage": {
                "type": "string",
                "attribute": "success-message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "dialogClosed": {
                "type": "unknown",
                "attribute": "dialog-closed",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "isOpened": {},
            "internalMessage": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "message",
                "methodName": "changeErrorMiddleware"
            }];
    }
}
