let drawer;
let keyword;
let price;
let year;
let kilometres;
let dataStore;
let filterManager;
let appliedFilters;
let shouldUpdateFilters = true;
let modelFilter = [];
let makeFilters;
function sendReq() {
    var formData = {
        'action': 'handle_autocart_form',
        'minPrice': price.getValueStart(),
        'maxPrice': price.getValue(),
        'minKilometres': kilometres.getValueStart(),
        'maxKilometres': kilometres.getValue(),
        'minYear':  year.getValueStart(),
        'maxYear':  year.getValue(),
        'autocart_nonce': jQuery('#autocart_nonce').val(),
    };
    const vehiclesContainer = document.querySelector('.vehicles-container');
    vehiclesContainer.textContent = 'Loading...';

    const filtersContainer = document.querySelector('.make-container');
    filtersContainer.textContent = 'Loading...';
    jQuery.ajax({
        type: 'POST',
        url: ajax_object.ajax_url,
        data: formData,
        success: function (response) {
            const vehicles = response.data.vehicles;
            if (dataStore) {
                dataStore.unsubscribeAll();
            }

          
            // Initialize new data store
            dataStore.vehicles = vehicles;
            filterManager = new FilterManager(dataStore);
            appliedFilters = new AppliedFilters(dataStore, filterManager);

            // filterManager = new FilterManager(dataStore);
            // appliedFilters = new AppliedFilters(dataStore, filterManager);
            
            shouldUpdateFilters = true;
            dataStore.subscribe(filteredVehicles => {
                console.log('dataStore has been changed')
                handleSuccess(filteredVehicles);
            });

            dataStore.notifySubscribers(vehicles);
        },
        error: function (xhr, status, error) {
            console.log(xhr.responseText);
            console.log('Status: ' + status);
            console.log('Error: ' + error);
            jQuery("#inventory-search__search-button").text("Error");
        }
    });
}

function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
    if(updateFilters){
       createMakeList(vehicles);
       createBodyTypeList(vehicles);
       createTransmissionList(vehicles);
       createExteriorList(vehicles);
    }
    const vehiclesContainer = document.querySelector('.vehicles-container');
    vehiclesContainer.innerHTML = '';
    
    vehicles.forEach(vehicleData => {
        const vehicle = new VehicleThumbnail(vehicleData);
        // vehiclesContainer.appendChild(vehicle.generateCardHTML());
        vehiclesContainer.appendChild(vehicle.generateCardElement());

    });

    
}

function createMakeList(vehicles){

    const makeContainer = document.querySelector('.make-container');
    makeContainer.innerHTML = '';

    const makeCounts = vehicles.reduce((acc, vehicle) => {
        const { make } = vehicle;
        acc[make] = (acc[make] || 0) + 1;
        return acc;
    }, {});
    let makeValue = document.querySelector('#autocart-make-field').value;
	// if(makeValue){
    //     console.log('makeValue',makeValue);
	// 	// dataStore.addFilter('make', makeValue);
	// }
    makeFilters = Object.entries(makeCounts).map(([make, count]) => {
   
        return filterManager.createMakeFilter({
            text: make,
            checked: makeValue.toLowerCase() === make.toLowerCase(),
            count, 
            models: fetchAvailableModels(vehicles, make) 
        }, dataStore);
    });
    makeFilters.forEach(make => {
        
        makeContainer.appendChild(make.generateCardHTML());
        make.subscribe(m=> initModelContainer(m))
    });
}

function createBodyTypeList(vehicles){
    const bodyTypeContainer = document.querySelector('.body-type-container');
    bodyTypeContainer.innerHTML = '';

    const bodyType = vehicles.reduce((acc, vehicle) => {
        const { body_type } = vehicle;
        acc[body_type] = (acc[body_type] || 0) + 1;
        return acc;
    }, {});

    filterManager.resetList('body_type');
    

    bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore));
    bodyTypeFilters.forEach(body_type => {
        bodyTypeContainer.appendChild(body_type.initCheckbox());
        // body_type.subscribe(m=> iniBodyTypeContainer(m))
    });
}

function createTransmissionList(vehicles){
    const transmissionContainer = document.querySelector('.transmission-container');
    
    transmissionContainer.innerHTML = '';

    const transmission = vehicles.reduce((acc, vehicle) => {
        const { transmission_type } = vehicle;
        acc[transmission_type] = (acc[transmission_type] || 0) + 1;
        return acc;
    }, {});

    filterManager.resetList('transmission_type');
    transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore));
    transmissionFilters.forEach(transmission => {
        transmissionContainer.appendChild(transmission.initCheckbox());
    });
}

function createExteriorList(vehicles){
    console.log(vehicles);
    const exteriorContainer = document.querySelector('.exterior-color');
    exteriorContainer.innerHTML = '';
    const exterior = vehicles.reduce((acc, vehicle) => {
        const { exterior_color } = vehicle;
        acc[exterior_color] = (acc[exterior_color] || 0) + 1;
        return acc;
    }, {});
    filterManager.resetList('exterior_color');

    exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore));
    exteriorFilters.forEach(exterior => {
        exteriorContainer.appendChild(exterior.initCheckbox());
    });
}


function initModelContainer(make){
    let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())];
    const modelContainer = document.querySelector('.model-container');
    if (list.length === 0) {
        modelContainer.innerHTML = '<p>Please Select a Make</p>';
    } else if (list && list.length > 0) {
        modelContainer.innerHTML = '';
        list.forEach(model => {
            modelContainer.appendChild(model.initCheckbox());
        });
    } else {
        modelContainer.innerHTML = '<p>No models available</p>';
    }
}

function initTrimContainer(model){
    let list = [...new Set(filterManager.modelFilters.filter(m=>m.checked == true).map(m=>m.trims).flat())];
    // const uniqueArray = [...new Set(array)];
    const trimContainer = document.querySelector('.trim-container');
  
    if (list.length === 0) {
        trimContainer.innerHTML = '<p>Please Select a Model</p>';
    } else if (list && list.length > 0) {
        trimContainer.innerHTML = '';
        list.forEach(trim => {
            trimContainer.appendChild(trim.initCheckbox());
        });
    } else {
        trimContainer.innerHTML = '<p>No trims available</p>';
    }
}

function fetchAvailableModels(vehicles, make) {
    const filteredModels = vehicles
        .filter(vehicle => vehicle.make === make)
        .map(vehicle => vehicle.model);
    // Count occurrences of each model
    const modelCounts = filteredModels.reduce((acc, model) => {
        acc[model] = (acc[model] || 0) + 1;
        return acc;
    }, {});

    // Convert to an array of objects
    const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count }));
    modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model))    
    return modelsArray;
}

function fetchAvailableTrim(vehicles, modelName){
    const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName);
    const trimCount = filteredVehicles.reduce((result, vehicle) => {
        vehicle.trim.forEach(trim => {
            const existingTrim = result.find(item => item.text === trim);
            if (existingTrim) {
                existingTrim.count += 1;
            } else {
                result.push({ text: trim, count: 1 });
            }
        });
        return result;
    }, []);
    return trimCount;
}

function updateModel(models){
    console.log('updateModel', models)
}



function debounce(func, delay) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
}

function updatePrice() {
    const min = price.getValueStart();
    const max = price.getValue();
    const formattedMin = '$' + min.toLocaleString();
    const formattedMax = '$' + max.toLocaleString();
    document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`;
    debouncedSendReq();
}

function updateYear() {
    const min = year.getValueStart();
    const max = year.getValue();
    document.getElementById('yearRange').textContent = `${min} to ${max}`;
    debouncedSendReq();
}

function updateMileage() {
    const min = kilometres.getValueStart();
    const max = kilometres.getValue();
    document.getElementById('KilometresRange').textContent = `${min} to ${max}`;
    debouncedSendReq();
}

// Create debounced versions of sendReq
const debouncedSendReq = debounce(sendReq, 300);