
class AppliedFilters {
    constructor(dataStore, filterManager) {
        this.dataStore = dataStore;
        this.filterManager = filterManager;
        this.container = document.querySelector('#applied-filters-block');
        this.render();
        this.dataStore.subscribe(() => this.render());
    }

    removeFilter(type, value) {
        this.dataStore.removeFilter(type, value);
        this.filterManager.removeFilter(type, value);
    }

    render() {
        const appliedFilters = this.dataStore.getAppliedFilters();
        const chipSetContainer = document.createElement('div');
        chipSetContainer.classList.add('mdc-chip-set');
    
        appliedFilters.forEach((filter) => {
            filter.values.forEach((fvalue) => {
                const id = `${filter.type}-${fvalue}`.replace(/[^a-zA-Z0-9-_]/g, '_');
                const chip = document.createElement('div');
                chip.innerHTML =  `
                <div id="chip-${id}" class="mdc-chip">
                    <div class="mdc-chip__ripple"></div>
                    <span role="gridcell">
                        <span role="button" tabindex="0" class="mdc-chip__primary-action">
                            <span class="mdc-chip__text">
                                <b>${filter.type.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase())}</b>: ${fvalue}
                            </span>
                        </span>
                    </span>
                    <span role="gridcell">
                        <svg class="mdc-chip__icon mdc-chip__icon--trailing filter-tags" id="close-${id}"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            aria-hidden="true" filter-tags>
                            <path stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M6 18L18 6M6 6l12 12">
                            </path>
                        </svg>
                    </span>
                </div>`;
                chip.querySelector(`#close-${id}`).addEventListener('click', () => this.removeFilter(filter.type, fvalue));
                chipSetContainer.appendChild(chip);
            });
        });
    
        // Clear existing content before appending new elements
        this.container.innerHTML = '';
        this.container.appendChild(chipSetContainer);
    
        // Initialize MDC chips
        const chipSet = new mdc.chips.MDCChipSet(chipSetContainer);
    }
    
}