class ModelFilter {
    constructor(model, dataStore) {
        this.value = model.text;
        this.count = model.count;
        this.parent = model.parent;
        this.dataStore = dataStore;
        this.checkbox = null;
        this.checked = model.checked;
        this.formField = null;
        this.trims = model.trims.map(trim=> filterManager.createTrimFilter({ text: trim.text, count: trim.count, parent: this.value, checked: false },  this.dataStore)); 
        this.subscribers = [];
        this.initCheckbox();
    }

   initCheckbox() {
        const makeListBlock = document.createElement('div');
        const dynamicId = `autocart_${this.value.toLowerCase().replace(/\s/g, '-').replace(/\./g, '')}`;
        const dynamicClass = `autocart_term_${this.value.toLowerCase().replace(/\s/g, '-').replace(/\./g, '')}`;

        makeListBlock.innerHTML = `
            <li class="w-full rounded-t-lg  flex items-center justify-between transition duration-400 autocart-filters">
            <div class="flex items-center mdc-form-field flex-wrap justify-between items-start flex-row w-full ${dynamicClass} hover:text-red-500">
                <label for="${dynamicId}" class="text-sm font-medium text-gray-900 dark:text-gray-300 transition duration-400  font-normal text-base">${this.value}</label>
                <span class="autocart_count text-gray-500 ml-2 transition duration-400 font-normal text-base">
                    (${this.count})
                </span>
            </div>
            <div class="mdc-checkbox mdc-theme-primary">
                <input type="checkbox" class="mdc-checkbox__native-control ${dynamicClass}" id="${dynamicId}" />
                <div class="mdc-checkbox__background rounded-md">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                </div>
                <div class="mdc-checkbox__ripple p-2"></div>
            </div>
        </li>
        `;
        
        this.checkbox = makeListBlock.querySelector('.mdc-checkbox');
    
        if (this.checkbox) {
            // Initialize the MDCCheckbox with the actual checkbox element
            const checkboxElement = this.checkbox.querySelector(`.mdc-checkbox__native-control.${dynamicClass}`);
            this.checkbox = new mdc.checkbox.MDCCheckbox(this.checkbox);
            this.formField = new mdc.formField.MDCFormField(makeListBlock.querySelector(`.mdc-form-field.${dynamicClass}`));
            this.formField.input = checkboxElement;
            this.checkbox.listen('change', () => this.handleCheckboxChange());
        } else {
            console.error('Checkbox element not found:', dynamicId);
        }

       this.markCheckboxIfValueFiltered()

        
        return makeListBlock;
    }

    markCheckboxIfValueFiltered() {
        let ifAlreadyFiltered = this.dataStore.getAppliedFilters().find(filter=>filter.type == "model");
        if(ifAlreadyFiltered){
            if(ifAlreadyFiltered.values.includes(this.value)){
                this.checkbox.checked = true;
            }
        }
    }

    handleCheckboxChange() {
        shouldUpdateFilters = false;
        const isChecked = this.checkbox.checked;
        if (isChecked) {

            this.dataStore.addFilter('model', this.value);


        } else {
            this.dataStore.removeFilter('model', this.value);
            // this.trims = [];
        }

        this.checked = isChecked;

        
        createBodyTypeList(this.dataStore.filterVehicles());
        createTransmissionList(this.dataStore.filterVehicles());
        createExteriorList(this.dataStore.filterVehicles());


        this.trims.forEach(trim=>trim.uncheckCheckbox())
        this.notifySubscribers();

    }

    setParentFilter(value){
        this.isParentSelected = value;
        this.generateCardHTML();
    }

    uncheckCheckbox() {
        if (this.checkbox) {
            this.checkbox.checked = false;
            this.handleCheckboxChange();
        }
    } 

    notifySubscribers() {
        this.subscribers.forEach(subscriber => subscriber(this));
    }

    subscribe(subscriber) {
        this.subscribers.push(subscriber);
    }

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }
}
