var recentArticles = [];

/// Ariticles
async function GetAricles() {
  var request = await SendRequest('GET', baseUrl + 'articles');
  recentArticles = JSON.parse(request.response);
  if (recentArticles.length !== 0) {
    buildDesktopArticleView(recentArticles);
    BuildMobileAritcleView(recentArticles);

    $("#articles-mobile").css({ 'display': 'block' });
    $("#articles-mobile-content").css({ 'display': 'block' });
    $("#articles-desktop").css({ 'display': 'flex' });
  }
}

function buildDesktopArticleView(recentArticles) {
  var articleDivs = "";
  for (let index = 0; index < recentArticles.length; index++) {
    const element = recentArticles[index];
    articleDivs += `<div class="row" style="float: right; padding-right: 6%;">
        <div id="article-box" class="col-md-12 article-block cursor-pointer" role="button" tabindex="0" onclick="ShowInfo(`+ index + `)" onkeydown="handleKeyDown(event, `+ index + `)">
          <div class="article-text recent-articles-text-center" style="width: 81%;">
            `+ element.title + `
          </div>
          `+ arrowSnippet + `
        </div>
      </div>`;
  }

  $("#recent-articles-desktop").append(articleDivs);
}

function handleKeyDown(event, index) {
  if (event.keyCode === 13) {
    ShowInfo(index);
  }
}


function ShowInfo(index) {
  const element = recentArticles[index];
  var date = new Date(element.date);
  const offset = date.getTimezoneOffset()
  date = new Date(date.getTime() - (offset * 60 * 1000))
  var formatedDate = formatDate(date.toISOString().split('T')[0]);
  var infoDivs = "";
  infoDivs = `<div class="row" style="padding-top: 48.95px;">
            <div class="col-md-12">
              <b class="white-container-title-text">` + element.title + `</b>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <hr class="col-sm-1 horizontal-line-orange" style="margin-top: 44px; margin-bottom: 8px;" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="white-container-date">` + formatedDate + `</div>
            </div>
          </div>
          <div class="row" style="padding-top: 8px;max-height: 140px;text-overflow: ellipsis;overflow: hidden;">
            <div class="col-md-12">
              <b class="white-container-description"> ` + element.description + ` </b>
            </div>
          </div>
          <div class="row" style="padding-top: 24px;">
            <div class="col-md-12">
              <a id="read-more-${index}" href="`+ element.qicurl + `" target="_blank" class="white-container-button cursor-pointer" role="button" tabindex="0" >Read More</a>
            </div>
          </div>`;

  document.getElementById("Article-info-container").innerHTML = "";
  $("#Article-info-container").append(infoDivs);

  setTimeout(() => {
    document.getElementById(`read-more-${index}`).focus();
  }, 0);
  
  if (!$("#flex-white-container").is(":visible")) {
    $("#flex-white-container").fadeToggle("slow");
  }

}

function formatDate(date) {
  var d = new Date(date),
    month = '' + d.toLocaleString('en-AU', { month: 'short' }),
    day = '' + d.getDate(),
    year = d.getFullYear();

  if (day.length < 2)
    day = '0' + day;
  return [day, month, year].join(' ');
}

function BuildMobileAritcleView(recentArticles) {
  var articleDivs = "";
  for (let index = 0; index < recentArticles.length; index++) {
    const element = recentArticles[index];
    var date = new Date(element.date);
    const offset = date.getTimezoneOffset()
    date = new Date(date.getTime() - (offset * 60 * 1000))
    var formatedDate = formatDate(date.toISOString().split('T')[0]);

    articleDivs += `<div class="container articles-margin-bottom" style="background-color: #354552; padding: 16px;" onclick="navigateToArticle('` + element.qicurl + `')">
        <div class="row">
          <div class="col-xs-12 col-sm-12">
            <b class="articles-header-text">`+ element.title + `</b>
          </div>
        </div>
        <div>
          <hr class="col-xs-1 col-sm-1 horizontal-line-orange" />
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-12">
            <b class="articles-description-text">`+ formatedDate + `</b>
          </div>
        </div>
        
        <div class="row">
          <div class="col-xs-12 col-sm-12">
            <b class="articles-description-text">`+ element.description + `</b>
          </div>
        </div>
      </div>`;
  }
  $("#recent-articles-mobile").append(articleDivs);
}

function navigateToArticle(url) {
  const box = document.getElementById('recent-articles-mobile');

  box.style.color = '#ECD4BC';

  window.location.href = url;
}