import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../../shared/utils/dom-utils";
import { detectFramework } from "../../shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class TextField {
    inputElement;
    el;
    /** Placeholder text shown when the field is empty. */
    placeholder = "Placeholder";
    /** Current value of the text field (can be updated programmatically). */
    value = "";
    /** If true, shows the text field in an error state. */
    error = false;
    /** Label text shown above the text field. */
    label = "";
    /** Optional icon shown inside or next to the text field. */
    icon = "";
    /** Helper text shown below the text field. */
    caption = "";
    /** Size of the text field (e.g. s, m, l). */
    size = "m";
    /** Whether a value is required (used for validation). */
    required = false;
    /** If true, shows the text field in a success/valid state. */
    success = false;
    /** If true, the text field is disabled and not interactive. */
    disabled = false;
    /** If true, the text field is read-only but focusable. */
    readOnly = false;
    /** Maximum number of characters allowed. */
    maxlength;
    /** If true, shows a delete/clear icon to remove the current value. */
    showDeleteIcon = false;
    /** Native autocomplete attribute value. */
    autocomplete = "on";
    /** Input type for the field (text or password). */
    type = "text";
    /** Internal ID used to link label and input elements. */
    internalId = "text-field";
    internalType;
    /** Fired when the user types or the value changes. */
    ifxInput;
    // @Prop({ reflect: true })
    // resetOnSubmit: boolean = false;
    internals;
    valueWatcher(newValue) {
        if (newValue !== this.inputElement.value) {
            this.inputElement.value = newValue;
        }
    }
    /** Resets the text field value and clears the underlying input element. */
    async reset() {
        this.value = "";
        this.inputElement.value = "";
    }
    handleDeleteContent() {
        if (!this.disabled && !this.readOnly) {
            this.reset();
            this.ifxInput.emit(this.value);
        }
    }
    handleInput() {
        const query = this.inputElement.value;
        this.value = query;
        //this.internals.setFormValue(query) // update form value
        this.ifxInput.emit(this.value);
    }
    handleTypeProp() {
        this.internalType =
            this.type === "text" || this.type === "password" ? this.type : "text";
    }
    // formResetCallback() {
    //   this.internals.setValidity({});
    //   this.internals.setFormValue("");
    // }
    componentWillLoad() {
        this.handleTypeProp();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-text-field", await framework);
        }
    }
    render() {
        return (h("div", { key: '3a0325a6fb3840d23816a40fbdcf4149776bc152', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? "readonly" : ""} ${this.disabled && !this.error ? "disabled" : ""}` }, h("div", { key: '1d018c34e55b68bd6bb425f44e47152615f77f61', class: "textInput__top-wrapper" }, this.label && (h("label", { key: '10ddb3f2233cb42677694829111824923eb743d6', htmlFor: this.internalId }, h("span", { key: 'd2a01f7885370ec79cf7d2a7b71b3233a5d836c4' }, this.label), this.required && (h("span", { key: 'efdd81a5c7f1010c03227df6ab1e6df3c991c53f', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))))), h("div", { key: '6fdbad0fa63bbb8057acf6e96b27da2e9a24ea2b', class: "textInput__bottom-wrapper" }, h("div", { key: 'f5f9cc6f79a9a278f233af0b9c4aa81d0e65ff84', class: "input-container" }, this.icon && h("ifx-icon", { key: 'd8ec860c600fb697a24939ec50b4e4d4cc091481', class: "input-icon", icon: this.icon }), h("input", { key: 'cf8c359c14f00dcc4d117d437d1d43b63f5fd673', ref: (el) => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? "icon" : ""}
                ${this.error ? "error" : ""} 
                ${this.readOnly ? "readonly" : ""} 
              ${this.size === "s" ? "input-s" : ""}
              ${this.success ? "success" : ""}` }), this.showDeleteIcon && this.value && (h("ifx-icon", { key: 'a916ac876ae75e02ccb45457d81ec27cfa093b8e', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && (h("div", { key: '88e143703bf28d6f2e3efbfdacb4604c2d193845', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? "error" : ""} ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, this.caption)))));
    }
    static get is() { return "ifx-text-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["text-field.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["text-field.css"]
        };
    }
    static get properties() {
        return {
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text shown when the field is empty."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "\"Placeholder\""
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current value of the text field (can be updated programmatically)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "\"\""
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the text field in an error state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text shown above the text field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "\"\""
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Optional icon shown inside or next to the text field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "\"\""
            },
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Helper text shown below the text field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption",
                "defaultValue": "\"\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the text field (e.g. s, m, l)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"m\""
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether a value is required (used for validation)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "success": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the text field in a success/valid state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "success",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the text field is disabled and not interactive."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the text field is read-only but focusable."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "read-only",
                "defaultValue": "false"
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Maximum number of characters allowed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "maxlength"
            },
            "showDeleteIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows a delete/clear icon to remove the current value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-delete-icon",
                "defaultValue": "false"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Native autocomplete attribute value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete",
                "defaultValue": "\"on\""
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"text\" | \"password\"",
                    "resolved": "\"password\" | \"text\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Input type for the field (text or password)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"text\""
            },
            "internalId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Internal ID used to link label and input elements."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "internal-id",
                "defaultValue": "\"text-field\""
            }
        };
    }
    static get states() {
        return {
            "internalType": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxInput",
                "name": "ifxInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the user types or the value changes."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "reset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Resets the text field value and clears the underlying input element.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueWatcher"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
