'use strict';

var index = require('./index-pX0sBY0-.js');

const filterSearchCss = () => `.sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}`;

const FilterSearch = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxFilterSearchChange = index.createEvent(this, "ifxFilterSearchChange", 7);
    }
    get host() { return index.getElement(this); }
    /** 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 (index.h("div", { key: '3206401f6ed494648859e568273e59900ea4f52a', class: `${this.filterOrientation === "sidebar"
                ? "sidebar-filter-search-wrapper"
                : "topbar-filter-search-wrapper"}` }, index.h("div", { key: 'fc007f7e1f24b469b8100eab47e92b9f1fb9b0f5', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '856c2e5f7621c436b08c80218747cefd32c12b50', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
    }
    static get watchers() { return {
        "value": [{
                "valueChanged": 0
            }]
    }; }
};
FilterSearch.style = filterSearchCss();

exports.ifx_filter_search = FilterSearch;
