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...';
  // Add skeleton cards to the vehicles container
  for (let i = 0; i < 6; i++) {
    const skeletonCard = createSkeletonCard();
    vehiclesContainer.appendChild(skeletonCard);
  }

  const filtersContainer = document.querySelector('.make-container');
  for (let i = 0; i < 2; i++) {
    const skeletonListItem = createSkeletonListItem();
    filtersContainer.appendChild(skeletonListItem);
  }
  // Add skeleton list item to the filters container
  // const skeletonListItem = createSkeletonListItem();
  // filtersContainer.appendChild(skeletonListItem);

  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.sort((a, b) => a.value.localeCompare(b.value));
  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.sort((a, b) => a.value.localeCompare(b.value));
  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.sort((a, b) => a.value.localeCompare(b.value));
  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.sort((a, b) => a.value.localeCompare(b.value));

  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.sort((a, b) => a.value.localeCompare(b.value));
    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.sort((a, b) => a.value.localeCompare(b.value));
    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);

function createSkeletonCard() {
  const skeletonCard = document.createElement('div');
  skeletonCard.classList.add(
    'bg-red-200',
    'rounded-lg',
    'shadow-md',
    'animate-pulse'
  );

  const innerHTML = `
      <div class="h-40 bg-red-300 rounded-t-lg"></div>
      <div class="p-4">
        <div class="h-12 bg-red-300 rounded-t-lg"></div>
        <div class="h-5 bg-red-400 rounded-t-lg"></div>
        <div class="h-5 bg-red-300 rounded-t-lg"></div>
        <div class="h-5 bg-red-400 rounded-t-lg"></div>
        <div class="h-5 bg-red-300 rounded-b-lg"></div>
      </div>
    `;

  skeletonCard.innerHTML = innerHTML;

  return skeletonCard;
}

function createSkeletonListItem() {
  const listItem = document.createElement('li');
  listItem.classList.add(
    'w-full',
    'bg-custom-red',
    'rounded-lg',
    'shadow-md',
    'animate-pulse'
  );

  const innerHTML = `
    <div class="flex items-center   justify-between p-1">
        <div class="h-6 bg-custom-red-light w-2/3 rounded-lg"></div>
        
        <div class="bg-custom-red-light w-1/6 h-6 rounded-lg"></div>
    </div>
    `;

  listItem.innerHTML = innerHTML;

  return listItem;
}