import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';

const filterTypeGroupCss = ":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";

const IfxFilterTypeGroup$1 = /*@__PURE__*/ proxyCustomElement(class IfxFilterTypeGroup extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxSidebarFilterChange = createEvent(this, "ifxSidebarFilterChange", 7);
        this.selectedOptions = [];
        this.handleResetEvent = () => {
            const accordionSlot = this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');
            const filterAccordionSlottedElements = accordionSlot.assignedElements({ flatten: true });
            filterAccordionSlottedElements.forEach(accordionElement => {
                const ifxLists = accordionElement.querySelectorAll('ifx-list');
                ifxLists.forEach((ifxListElement) => {
                    ifxListElement.resetTrigger = !ifxListElement.resetTrigger;
                });
            });
            const filterSearchSlot = this.el.shadowRoot.querySelector('slot[name="filter-search"]');
            const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });
            filterSearchSlottedElements.forEach((filterSearchWrapper) => {
                const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');
                const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field');
                if (searchField.length > 0) {
                    searchField.forEach((searchFieldElement) => {
                        searchFieldElement.value = '';
                    });
                }
            });
            this.selectedOptions = [];
            // Emit the change to inform any parent components that the filters have been reset
            this.ifxSidebarFilterChange.emit(this.selectedOptions);
        };
        this.handleUpdateSidebarFilter = (event) => {
            const { filterName } = event.detail;
            const accordionSlot = this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');
            const filterAccordionSlottedElements = accordionSlot ? accordionSlot.assignedElements({ flatten: true }) : [];
            filterAccordionSlottedElements.forEach(accordionElement => {
                const ifxLists = accordionElement.querySelectorAll('ifx-list');
                ifxLists.forEach((ifxListElement) => {
                    if (ifxListElement.getAttribute('name') === filterName) {
                        ifxListElement.resetTrigger = !ifxListElement.resetTrigger;
                    }
                });
            });
            // Clear the search bar within the filter-search slot
            const searchSlot = this.el.shadowRoot.querySelector('slot[name="filter-search"]');
            const filterSearchSlottedElements = searchSlot ? searchSlot.assignedNodes({ flatten: true }) : [];
            filterSearchSlottedElements.forEach(searchElement => {
                if (searchElement.nodeType === Node.ELEMENT_NODE) {
                    // Identify the ifx-filter-search component within the slot
                    const filterSearchComponent = searchElement;
                    const searchField = filterSearchComponent.firstElementChild;
                    if (searchField) {
                        searchField.setAttribute('value', '');
                        searchField.dispatchEvent(new CustomEvent('ifxInput', { bubbles: true, composed: true, detail: '' })); // Trigger ifxInput event to reset
                    }
                }
            });
            const newSelectedOptions = this.selectedOptions.map(option => {
                if (option.filterGroupName === filterName) {
                    return Object.assign(Object.assign({}, option), { selectedItems: [], value: '' });
                }
                return option;
            });
            this.selectedOptions = newSelectedOptions;
            this.ifxSidebarFilterChange.emit(this.selectedOptions);
        };
        this.handleAccordionChange = (event) => {
            this.handleFilterChange(event);
        };
        this.handleSearchChange = (event) => {
            // Call handleFilterChange with the created CustomEvent object
            this.handleFilterChange(event);
        };
        this.handleFilterChange = (event) => {
            // Create a new array to hold the new state
            const newSelectedOptions = [...this.selectedOptions];
            // Check the type of the event
            if (event.type === 'ifxFilterSearchChange') {
                // Handle the ifxFilterSearchChange event
                const { filterName, filterValue } = event.detail;
                // Find the existing filter with the same filterName
                const existingOptionIndex = newSelectedOptions.findIndex(option => typeof option !== 'string' && option.filterGroupName === filterName);
                if (existingOptionIndex !== -1) {
                    // If an existing filter is found, update its value
                    newSelectedOptions[existingOptionIndex].value = filterValue;
                }
                else {
                    // If no existing filter is found, append the new filter
                    newSelectedOptions.push({ filterGroupName: filterName, value: filterValue });
                }
            }
            else if (event.type === 'ifxFilterAccordionChange') {
                const { filterGroupName, selectedItems } = event.detail;
                // Find the existing filter group with the same filterGroupName
                const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterGroupName === filterGroupName);
                if (existingOptionIndex !== -1) {
                    // If an existing filter group is found, update its selectedItems
                    newSelectedOptions[existingOptionIndex] = { filterGroupName, selectedItems };
                }
                else {
                    // If no existing filter group is found, append the new filter group
                    newSelectedOptions.push({ filterGroupName, selectedItems });
                }
            }
            // Update the state with the new selected options
            this.selectedOptions = newSelectedOptions;
            // Emit the entire selectedOptions array
            this.ifxSidebarFilterChange.emit(this.selectedOptions);
        };
    }
    /* If the component is ever removed and then reattached to the DOM,
    connectedCallback ensures that the event listeners are properly set up again */
    connectedCallback() {
        this.el.addEventListener('ifxFilterAccordionChange', this.handleAccordionChange);
        this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);
        window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);
        window.addEventListener('ifxUpdateSidebarFilter', this.handleUpdateSidebarFilter);
    }
    componentWillUnload() {
        this.el.removeEventListener('ifxFilterAccordionChange', this.handleAccordionChange);
        this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);
        window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
    }
    render() {
        return (h(Host, { key: '5788e9ac89c2c087bb039259cafa2c5005d99c48' }, h("div", { key: 'ff9189badfd57e317d1a2cbc0ff877f158b440f9', class: "filter-type-group" }, h("slot", { key: 'b51eb25c958bd08727450332a666c38cb4da2947', name: "filter-search" }), h("slot", { key: '1d52ab359da27095932a1928beff606205b126e4', name: "filter-accordion" }))));
    }
    get el() { return this; }
    static get style() { return filterTypeGroupCss; }
}, [257, "ifx-filter-type-group", {
        "selectedOptions": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-filter-type-group"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-filter-type-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, IfxFilterTypeGroup$1);
            }
            break;
    } });
}

const IfxFilterTypeGroup = IfxFilterTypeGroup$1;
const defineCustomElement = defineCustomElement$1;

export { IfxFilterTypeGroup, defineCustomElement };
//# sourceMappingURL=ifx-filter-type-group.js.map

//# sourceMappingURL=ifx-filter-type-group.js.map