async function fetchMoreThematiquePostDatas() {
  // const response = await fetch('/wp-json/wp/v2/questions?per_page=100');
  const response = await fetch('/wp-json/wp/v2/questions?thematiques=41');

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

async function handleLoadMoreClick() {
  const posts = await fetchMoreThematiquePostDatas();
  const postsContainer = document.querySelector('.post-question-page__accordeons-container');
  console.log(mainAppJsDynamicDatas.current_thematique);
  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() {
  console.log(mainAppJsDynamicDatas);
  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;
      console.log(fetchPostDatas);
    });
  });
}