import { h, } from "@stencil/core";
export class FilterSearch {
    host;
    /** Display name/label for this filter input */
    filterName;
    /** Disables the filter and prevents user interaction */
    disabled = false;
    /** Current filter text/value */
    filterValue;
    /** Unique key/identifier for this filter */
    filterKey;
    showDeleteIcon = false;
    /** Layout context for the filter */
    filterOrientation = "sidebar"; //topbar
    /** Placeholder text shown when input is empty */
    placeholder;
    /** Emitted when the filter/search value changes */
    ifxFilterSearchChange;
    valueChanged(newValue) {
        this.host.setAttribute("value", newValue.toString());
    }
    handleFilterSearchChange(event) {
        // Check if a search filter with the same filterName already exists
        const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);
        if (existingFilter && existingFilter !== this.host) {
            throw new Error(`A search filter with the name '${this.filterName}' already exists.`);
        }
        // // Check if the filterName is 'search' and the filter is not the search component
        // if (this.filterName === 'search' && this.filterKey !== 'text') {
        //   throw new Error("The filter name 'search' is reserved for the search component.");
        // }
        this.filterValue = event.detail;
        this.showDeleteIcon = this.filterValue !== "";
        this.ifxFilterSearchChange.emit({
            filterName: this.filterName,
            filterValue: this.filterValue,
            filterKey: this.filterKey,
        }); // Emitting filterKey along with other properties
    }
    render() {
        return (h("div", { key: '3206401f6ed494648859e568273e59900ea4f52a', class: `${this.filterOrientation === "sidebar"
                ? "sidebar-filter-search-wrapper"
                : "topbar-filter-search-wrapper"}` }, h("div", { key: 'fc007f7e1f24b469b8100eab47e92b9f1fb9b0f5', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '856c2e5f7621c436b08c80218747cefd32c12b50', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
    }
    static get is() { return "ifx-filter-search"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["filter-search.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["filter-search.css"]
        };
    }
    static get properties() {
        return {
            "filterName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Display name/label for this filter input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter-name"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the filter and prevents user interaction"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "filterValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current filter text/value"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter-value"
            },
            "filterKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Unique key/identifier for this filter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter-key"
            },
            "filterOrientation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Layout context for the filter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "filter-orientation",
                "defaultValue": "\"sidebar\""
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text shown when input is empty"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            }
        };
    }
    static get states() {
        return {
            "showDeleteIcon": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxFilterSearchChange",
                "name": "ifxFilterSearchChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the filter/search value changes"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "ifxInput",
                "method": "handleFilterSearchChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
