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;
}
async function hydrateFields(formObjectDatas) {
  const currentLanguage = document
    .querySelector('body')
    .getAttribute('current-language');
  const taxonomy = formObjectDatas.search_by;
  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}`
  );
  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
  // );
}

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

  if (!form) {
    return;
  }
  form.addEventListener('change', (e) => {
    e.preventDefault();

    const form = e.target.closest('form');
    const formData = new FormData(form);

    let formObjectDatas = formatFormDataArray(formData);
    console.log(formObjectDatas);

    hydrateFields(formObjectDatas);
  });
}