async function fetchMoreThematiquePostDatas(id) {
  const response = await fetch(`/wp-json/homegrade-datas/v1/questions-thematiques/${id}`);

  const data = await response.json();
  return data;
}

async function handleLoadMoreClick() {
  const currentTermId = mainAppJsDynamicDatas.current_thematique.term_id;
  const posts = await fetchMoreThematiquePostDatas(currentTermId);
  const postsContainer = document.querySelector('.post-question-page__accordeons-container');
  // console.log(posts);
  // posts.forEach((post) => {
  //   let newContent = createDetailsElement(post);
  //   postsContainer.appendChild(newContent);
  // });
}

function createDetailsElement(post) {
  const details = document.createElement('details');
  details.classList.add('question');

  const summary = document.createElement('summary');
  summary.textContent = post.title.rendered;

  const openCloseIcon = document.createElement('div');
  openCloseIcon.classList.add('open-close-icon');

  const chevron = document.createElement('img');
  chevron.src =
    mainAppJsDynamicDatas.template_directory_uri + '/resources/img/graphic-assets/chevron_down.svg';

  const content = document.createElement('div');
  content.classList.add('content', 'entry-content');
  content.innerHTML = post.content.rendered;

  details.appendChild(summary);
  openCloseIcon.appendChild(chevron);
  details.appendChild(openCloseIcon);
  details.appendChild(content);

  return details;
}

export default async function taxonomyThematiqueFaqInit() {
  const currentQuestionPage = document.querySelector('.post-question-page');
  const filters = document.querySelectorAll('.thematiques-subtaxonomy-links li');
  if (!currentQuestionPage) return;

  const loadMoreButton = document.querySelector('#load-more-questions');

  loadMoreButton.addEventListener('click', handleLoadMoreClick);

  filters.forEach((filter) => {
    filter.addEventListener('click', (e) => {
      e.preventDefault;
    });
  });
}