console.log('RUNNING ELMWOOD.JS');

document.addEventListener('DOMContentLoaded', function () {
  // Get all filter elements
  const resetButton = document.querySelector('[filter="reset"]');
  const allCheckbox = document.querySelector('input[filter="all"]');
  const availableCheckbox = document.querySelector('input[filter="Available"]');
  const soldCheckbox = document.querySelector(
    'input[filter="Sold / Pending Units"]'
  );
  const penthouseCheckbox = document.querySelector('input[filter="Penthouse"]');
  const townhouseCheckbox = document.querySelector('input[filter="Townhouse"]');
  const bedroom1Checkbox = document.querySelector('input[filter="bedroom-1"]');
  const bedroom2Checkbox = document.querySelector('input[filter="bedroom-2"]');
  const bedroom3Checkbox = document.querySelector('input[filter="bedroom-3"]');

  // Get all filter checkboxes (excluding all checkbox)
  const filterCheckboxes = [
    availableCheckbox,
    soldCheckbox,
    penthouseCheckbox,
    townhouseCheckbox,
    bedroom1Checkbox,
    bedroom2Checkbox,
    bedroom3Checkbox,
  ].filter(Boolean);

  // Get all list items
  const listItems = document.querySelectorAll('[filter-list="item"]');

  // Helper function to get the custom checkbox div for an input
  function getCustomCheckbox(input) {
    if (!input) return null;
    return input.parentElement.querySelector('.w-checkbox-input');
  }

  // Helper function to check a checkbox
  function checkCheckbox(input) {
    if (input) {
      input.checked = true;
      const customCheckbox = getCustomCheckbox(input);
      if (customCheckbox) {
        customCheckbox.classList.add('w--redirected-checked');
      }
    }
  }

  // Helper function to uncheck a checkbox
  function uncheckCheckbox(input) {
    if (input) {
      input.checked = false;
      const customCheckbox = getCustomCheckbox(input);
      if (customCheckbox) {
        customCheckbox.classList.remove('w--redirected-checked');
      }
    }
  }

  // Helper function to check if a checkbox is checked
  function isChecked(input) {
    if (!input) return false;
    const customCheckbox = getCustomCheckbox(input);
    return (
      customCheckbox &&
      customCheckbox.classList.contains('w--redirected-checked')
    );
  }

  // Function to get item data
  function getItemData(item) {
    // Get bedroom from [bedroom] attribute
    const bedroomEl = item.querySelector('[bedroom]');
    const bedroom = bedroomEl ? bedroomEl.getAttribute('bedroom') : '';

    // Get type from [typ] attribute
    const typeEl = item.querySelector('[typ]');
    const type = typeEl ? typeEl.getAttribute('typ') : '';

    // Get status from [status] attribute inside .filter
    const statusEl = item.querySelector('[status]');
    const status = statusEl ? statusEl.getAttribute('status') : '';

    return { bedroom, type, status };
  }

  // Function to filter items based on current checkbox states
  function filterItems() {
    // Check if "all" is checked
    if (isChecked(allCheckbox)) {
      listItems.forEach(item => {
        item.style.display = '';
      });
      return;
    }

    // Get active filters
    const activeStatuses = [];
    const activeTypes = [];
    const activeBedrooms = [];

    if (isChecked(availableCheckbox)) activeStatuses.push('Available');
    if (isChecked(soldCheckbox)) activeStatuses.push('Sold / Pending');

    if (isChecked(penthouseCheckbox)) activeTypes.push('Penthouse');
    if (isChecked(townhouseCheckbox)) activeTypes.push('Townhouse');

    if (isChecked(bedroom1Checkbox)) activeBedrooms.push('1');
    if (isChecked(bedroom2Checkbox)) activeBedrooms.push('2');
    if (isChecked(bedroom3Checkbox)) activeBedrooms.push('3');

    // If no filters are active, hide all items
    const noFiltersActive =
      activeStatuses.length === 0 &&
      activeTypes.length === 0 &&
      activeBedrooms.length === 0;

    listItems.forEach(item => {
      if (noFiltersActive) {
        item.style.display = 'none';
        return;
      }

      const { bedroom, type, status } = getItemData(item);

      // Check if item matches all active filter categories
      const matchesStatus =
        activeStatuses.length === 0 || activeStatuses.includes(status);
      const matchesType =
        activeTypes.length === 0 || activeTypes.includes(type);
      const matchesBedroom =
        activeBedrooms.length === 0 || activeBedrooms.includes(bedroom);

      if (matchesStatus && matchesType && matchesBedroom) {
        item.style.display = '';
      } else {
        item.style.display = 'none';
      }
    });
    refreshLenis();
  }

  // Function to handle filter checkbox change
  function handleFilterCheckboxChange(input) {
    const customCheckbox = getCustomCheckbox(input);

    // Toggle the checkbox state
    if (isChecked(input)) {
      uncheckCheckbox(input);
    } else {
      checkCheckbox(input);
      // Uncheck "all" when any other filter is checked
      uncheckCheckbox(allCheckbox);
    }

    // If no checkboxes are checked, check "all"
    const anyChecked = filterCheckboxes.some(cb => isChecked(cb));
    if (!anyChecked) {
      checkCheckbox(allCheckbox);
    }

    filterItems();
  }

  // Function to handle "all" checkbox change
  function handleAllCheckboxChange() {
    checkCheckbox(allCheckbox);
    // Uncheck all other filters
    filterCheckboxes.forEach(cb => uncheckCheckbox(cb));
    filterItems();
  }

  // Function to handle reset button click
  function handleResetClick(e) {
    e.preventDefault();
    checkCheckbox(allCheckbox);
    // Uncheck all other filters
    filterCheckboxes.forEach(cb => uncheckCheckbox(cb));
    filterItems();
  }

  // Add event listeners
  if (resetButton) {
    resetButton.addEventListener('click', handleResetClick);
  }

  // For Webflow custom checkboxes, we need to listen to the label click
  // and prevent the default behavior, then handle it ourselves
  if (allCheckbox) {
    const allLabel = allCheckbox.closest('label');
    if (allLabel) {
      allLabel.addEventListener('click', function (e) {
        e.preventDefault();
        handleAllCheckboxChange();
      });
    }
  }

  filterCheckboxes.forEach(input => {
    if (input) {
      const label = input.closest('label');
      if (label) {
        label.addEventListener('click', function (e) {
          e.preventDefault();
          handleFilterCheckboxChange(input);
        });
      }
    }
  });

  // Initialize: ensure proper state on load
  filterItems();
});