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 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'
    );
    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;
  console.log(`localisation  : ${localisation}`);

  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();

  // console.log(artisansDatas);

  const artisansGrid = document.querySelector(
    '.artisans-posts__grid'
  );
  artisansGrid.innerHTML = artisansDatas.html_template;
  // brochureRows.setAttribute(
  //   'current-post-count',
  //   brochuresDatas.total_posts_found
  // );
}

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}`
  );
  const searchArtisansDatas = await response.json();

  console.log(searchArtisansDatas);

  const artisansGrid = document.querySelector(
    '.artisans-posts__grid'
  );
  artisansGrid.innerHTML =
    searchArtisansDatas.html_template;
  brochureRows.setAttribute(
    'current-post-count',
    brochuresDatas.total_posts_found
  );
}

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'
    );

    children.forEach((child) => {
      child.checked = true;
    });
  }
  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;

  console.log(metiersCheckbox);

  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);
}