'use strict';

var index = require('./index-n_pDKBY2.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxSidebarFilterChange = index.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 (index.h(index.Host, { key: '94b9242c4dfad88c33d3cc60ce16f275c6599e19' }, index.h("div", { key: 'e2e65ea326edd9bb145f3f9dac2828195acd32b3', class: "filter-type-group" }, index.h("slot", { key: '74ab49bf1a2d7e5ee43f7dfdda975a85791aab55', name: "filter-search" }), index.h("slot", { key: 'b245f5b5ce1fa14e5c707512947069b9ddd28bc6', name: "filter-accordion" }))));
    }
    get el() { return index.getElement(this); }
};
IfxFilterTypeGroup.style = filterTypeGroupCss;

exports.ifx_filter_type_group = IfxFilterTypeGroup;
//# sourceMappingURL=ifx-filter-type-group.entry.cjs.js.map

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