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

function handleHierarchicalCheckboxRelation(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 handleFormChange(e) {
  e.preventDefault();

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

  let formObjectDatas = formatFormDataArray(formData);
  hydrateFields(formObjectDatas);
}
export default function dynamicSearch() {
  const form = document.querySelector(
    '.metier-patrimoine-searchform'
  );

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