(function () {
  // 'use strict';

  // Put here your custom JavaScript code.
console.log ("Hello World");
async function fetchLatestResearch(page) {
  const response = await fetch('/api/v1/content/our-latest-research-page?pageNum=' + page);
  const jsonData = await response.json();
  return jsonData;
}

async function fetchInTheNews(page) {
  const response = await fetch('/api/v1/content/in-the-news-page?pageNum=' + page);
  const jsonData = await response.json();
  return jsonData;
}

let lastLatestResearchPage = 0;
let lastInTheNewsPage = 0;

const loadMoreLatestResearchButton = document.getElementsByClassName('loadmore')[0];
const latestResearchContainer = document.getElementsByClassName('research-posts')[0];

loadMoreLatestResearchButton.addEventListener('click', async function () {
  lastLatestResearchPage = lastLatestResearchPage + 1;
  let result = await fetchLatestResearch(lastLatestResearchPage);

  result = result.data;

  if (result.pageLast === (lastLatestResearchPage + 1)) {
    loadMoreLatestResearchButton.style.display = 'none';
  }

  result.articles.forEach(article => {
    latestResearchContainer.innerHTML = latestResearchContainer.innerHTML + `
      <div>
        <div class="image-wrap" style="background-image: url('${article.image_url}')"></div>
        <div class="body">
          <p class="date">${article.date}</p>
          <h3><a href="${article.title_url}" class="trend-readmore-link" target="_self">${article.title}</a></h3>
          <p class="read-more"><a href="${article.readmore_url}" class="trend-title-link" target="_self">Read more</a></p>
        </div>
      </div>
    `;
  });
});


const loadMoreInTheNewsButton = document.getElementsByClassName('loadmore')[1];
const inTheNewsContainer = document.getElementsByClassName('news-posts')[0];

loadMoreInTheNewsButton.addEventListener('click', async function () {
  lastInTheNewsPage = lastInTheNewsPage + 1;
  let result = await fetchInTheNews(lastInTheNewsPage);

  result = result.data;

  if (result.pageLast === (lastInTheNewsPage + 1)) {
    loadMoreInTheNewsButton.style.display = 'none';
  }

  result.articles.forEach(article => {
    inTheNewsContainer.innerHTML = inTheNewsContainer.innerHTML + `
      <div>
        <div class="image-wrap" style="background-image: url('${article.image_url}')"></div>
        <div class="body">
          <p class="date">${article.date}</p>
          <h3><a href="${article.title_url}" class="trend-readmore-link" target="_blank">${article.title}</a></h3>
          <p class="read-more"><a href="${article.readmore_url}" class="trend-title-link" target="_blank">Read more</a></p>
        </div>
      </div>
    `;
  });
});

})();

