Metiers_du_patrimoine_theme/resources/js/dynamicSearch.js

function formatFormDataArray(formData) {
  let formObjectDatas = {};

  for (const [name, value] of formData) {
    const cleanName = name.replace('[]', '');

    if (formObjectDatas[cleanName]) {
      // Si la clé correspond à un tableau (comme les checkboxes)
      // ajouter la nouvelle valeur au tableau
      if (Array.isArray(formObjectDatas[cleanName])) {
        formObjectDatas[cleanName].push(value);
      } else {
        formObjectDatas[cleanName] = [formObjectDatas[cleanName], value];
      }
    } else {
      formObjectDatas[cleanName] = value;
    }
  }
  return formObjectDatas;
}

function observeSearchResetButton() {
  const currentSearchWordQueryButton = document.querySelector('.active-research-indicator');

  const searchInput = document.querySelector('#search-input');

  currentSearchWordQueryButton.addEventListener('click', () => {
    resetSearchfield();
    hydrateWithAllArtisans({});
  });

  searchInput.addEventListener('input', (event) => {
    if (event.target.value === '') {
      resetSearchfield();
      hydrateWithAllArtisans({});
    }
  });
}
function observeResetAllArtisansButton() {
  const resetAllArtisansButton = document.querySelector('#reset-all-artisans-button');
  resetAllArtisansButton.addEventListener('click', () => {
    resetSearchfield();
    hydrateWithAllArtisans({});
  });
}
function observeNoResultsApparition() {
  const grid = document.querySelector('.artisans-posts__grid');

  const observer = new MutationObserver(() => {
    const noResults = grid.querySelector('.no-results');
    if (!noResults) return;

    observeResetAllArtisansButton();
  });
  observer.observe(grid, { childList: true, subtree: true });
}
function clearAllCheckboxes() {
  const filtersCheckboxes = document.querySelectorAll('.taxonomy-checkbox');

  filtersCheckboxes.forEach((checkbox) => {
    checkbox.checked = false;
  });
}

function resetSearchfield() {
  const searchInput = document.querySelector('#search-input');
  searchInput.value = '';

  const currentSearchWordQueryButton = document.querySelector('.active-research-indicator');
  currentSearchWordQueryButton.setAttribute('is-active', 'false');
}

function formatSearchDataArray(formData) {
  let formObjectDatas = {};

  for (const [name, value] of formData) {
    formObjectDatas[cleanName] = value;
  }
  return formObjectDatas;
}

function handleRadioCardClick(card) {
  card.addEventListener('click', (e) => {
    const radioInput = card.querySelector('input[type="radio"]');
    radioInput.checked = true;
    const artisanPosts = document.querySelector('.artisans-posts');

    clearAllCheckboxes();
    resetSearchfield();

    if (!artisanPosts) return;
    artisanPosts.scrollIntoView({ behavior: 'smooth' });
  });
}
async function hydrateFields(formObjectDatas) {
  const currentLanguage = document.querySelector('body').getAttribute('current-language');
  const taxonomy = formObjectDatas.search_by;
  const localisation = formObjectDatas.localisation ?? null;

  const taxonomyIds = taxonomy === 'metiers' ? formObjectDatas.metiers : formObjectDatas.elementsbatiments;

  const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}`);
  const artisansDatas = await response.json();

  const artisansGrid = document.querySelector('.artisans-posts__grid');
  artisansGrid.innerHTML = artisansDatas.html_template;
  const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count');

  postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString();
}
async function hydrateWithAllArtisans() {
  const currentLanguage = document.querySelector('body').getAttribute('current-language');
  const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}`);
  const artisansDatas = await response.json();

  const artisansGrid = document.querySelector('.artisans-posts__grid');
  artisansGrid.innerHTML = artisansDatas.html_template;
  const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count');

  postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString();
}

async function hydrateSearch(searchValue) {
  const currentLanguage = document.querySelector('body').getAttribute('current-language');

  const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}&current-page-language=${currentLanguage}`);
  const searchArtisansDatas = await response.json();

  const artisansGrid = document.querySelector('.artisans-posts__grid');
  artisansGrid.innerHTML = searchArtisansDatas.html_template;

  const postResultsAriaLiveDiv = document.querySelector('.posts-results-count .results-count');

  postResultsAriaLiveDiv.innerHTML = searchArtisansDatas.total_posts_found.toString();

  const currentQueriedWordAriaLiveDiv = document.querySelector('.current-queried-word');
  const activeSearchIndicator = document.querySelector('.active-research-indicator');

  currentQueriedWordAriaLiveDiv.innerHTML = searchValue;
  activeSearchIndicator.setAttribute('is-active', 'true');
}

function handleHierarchicalTaxonomyCheckboxRelation(e) {
  // If parent is checked, check all children
  if (e.target.checked && e.target.classList.contains('parent-checkbox')) {
    const parentRootTag = e.target.closest('.checkbox-choice');
    const children = parentRootTag.querySelectorAll('.child-checkbox');
    //alert('check parent là');
    /*children.forEach((child) => {
      child.checked = true;
    });*/
  }

  if (e.target.checked && e.target.classList.contains('child-checkbox')) {
    //alert('check child là');
    const checkboxRootTag = e.target.closest('.checkbox-choice');
    const parentCheckbox = checkboxRootTag.parentElement.parentElement.querySelector('.parent-checkbox');

    parentCheckbox.checked = false;
  }

  if (!e.target.checked && e.target.classList.contains('parent-checkbox')) {
    //alert('uncheck parent');
    const parent = e.target.closest('.checkbox-choice');
    const children = parent.querySelectorAll('.child-checkbox');

    children.forEach((child) => {
      child.checked = false;
    });
  }

  if (!e.target.checked && e.target.classList.contains('child-checkbox')) {
    const checkboxRootTag = e.target.closest('.checkbox-choice');
    const parentCheckbox = checkboxRootTag.parentElement.parentElement.querySelector('.parent-checkbox');

    parentCheckbox.checked = false;
  }
}

function handleLocalisationCheckboxBehaviour(e) {
  const AlllocalisationsCheckboxes = document.querySelector('.localisation-checkbox[value="all"]');
  // If parent is checked, check all children
  if (e.target.checked && e.target.value === 'all') {
    const localisationCheckboxes = document.querySelectorAll('.localisation-checkbox');

    localisationCheckboxes.forEach((checkbox) => {
      checkbox.checked = true;
    });
  }
  if (!e.target.checked && AlllocalisationsCheckboxes.checked === true) {
    AlllocalisationsCheckboxes.checked = false;
  }
  if (e.target.checked && e.target.value !== 'all') {
    AlllocalisationsCheckboxes.checked = false;
  }
}

function handleFormChange(e) {
  e.preventDefault();

  if (e.target.type === 'checkbox' && e.target.classList.contains('taxonomy-checkbox')) {
    handleHierarchicalTaxonomyCheckboxRelation(e);
  }
  if (e.target.type === 'checkbox' && e.target.classList.contains('localisation-checkbox')) {
    handleLocalisationCheckboxBehaviour(e);
  }
  const form = e.target.closest('form');
  const formData = new FormData(form);

  let formObjectDatas = formatFormDataArray(formData);
  hydrateFields(formObjectDatas);
}

function handleSearchSubmit(e) {
  e.preventDefault();

  const searchBy = document.querySelector('.metier-patrimoine-searchbar__search-by');
  const elementsBatimentsCheckbox = document.querySelector('#elements_batiments_checkbox');
  const metiersCheckbox = document.querySelector('#metiers_checkbox');

  metiersCheckbox.checked = false;
  elementsBatimentsCheckbox.checked = false;

  const form = e.target.closest('form');
  const searchValue = form.querySelector('#search-input').value;

  hydrateSearch(searchValue);

  const artisanPosts = document.querySelector('.artisans-posts');
  if (!artisanPosts) return;
  artisanPosts.scrollIntoView({ behavior: 'smooth' });
}

export default function dynamicSearch() {
  const form = document.querySelector('.metier-patrimoine-searchform');

  if (!form) {
    return;
  }
  form.addEventListener('change', handleFormChange);

  const searchRadioCards = document.querySelectorAll('.search-radio-card');

  searchRadioCards.forEach((card) => {
    handleRadioCardClick(card);
  });

  const searchForm = document.querySelector('.artisan-search-bar');
  searchForm.addEventListener('submit', handleSearchSubmit);
  observeSearchResetButton();
  observeNoResultsApparition(); // Si la div no-results apparait, on observe le bouton reset all artisans pour gérer son comortement
}