let points = data;
let id = "";
let clicked_id = -1;
let isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  isMobile = true;
}

function renderPoints() {
  let results_html = '';

  for (i in points) {
    p_date = points[i][0];
    p_date_filtered = p_date.replace(/["]/g, "'"); // filter for speacial character ["]
    p_date02 =
      $.trim(points[i][1]) == ""
        ? `<h6 class="point-date">${p_date_filtered}</h6>`
        : `<h6 class="point-date-info">${p_date_filtered}</h6>`;

    line01 = `<div id="line-${i}" class="line-main"></div>\n`;
    line02 = `<div id="line-${i}" class="line-under"></div>\n`;

    // Make button hoverable only if content exists
    btn_class = $.trim(points[i][1]) == "" ? "" : " enabled";

    results_html += `
      <div class="flex-fill">
        <div class="point-container d-flex justify-content-center align-items-center">
            ${line01}
          <button id="button-${i}" type="button" class="point-button${btn_class}" data-bs-target="#button-${i}"
            data-bs-parent="#containerResults"
            aria-controls="button-${i}"
            aria-label="${p_date_filtered}">
          </button>
          <div id="line-${i}" class="line-main"></div>
        </div>
        <br/>
        <div class="d-flex flex-wrap justify-content-center align-items-center">
          ${line02}
          ${p_date02}
          <div id="line-${i}" class="line-under"></div>
        </div>
      </div>
    `;
  }
  $("#containerResults").empty().html(results_html);

  // Toggles popup with js. Replace old CSS functionality
  $(".flex-fill:has(.point-button.enabled)").hover(
    
    function () {
      if(clicked_id == -1){
        element = $(this).find('.point-button.enabled');
        id = element.attr("id").split("-")[1];
        popUp_data = data[id];
        popUp_html =  `<h3>${popUp_data[0]}</h3>
        <p>${popUp_data[1]}</p>`;
        element.addClass("hovered");
        $(".popup-wrapper").empty().html(popUp_html).addClass("show");
      }
    },
    function () {
      if(clicked_id == -1){
        $(".popup-wrapper").removeClass("show");
        $(".point-button").removeClass("hovered");
      }
    }
  );

  // Point Modal - Lazy Loading when points are clicked
  $(".flex-fill:has(.point-button.enabled)").click(function () {
    if((element = $(this).find('.point-button.enabled')).length !== 0) {
      if(clicked_id != element.attr("id").split("-")[1]){
        clicked_id = element.attr("id").split("-")[1];
        popUp_data = data[clicked_id];
        popUp_html =  `<h3>${popUp_data[0]}</h3>
        <p>${popUp_data[1]}</p>`;
        $(".popup-wrapper").empty().html(popUp_html).addClass("pinned");
        $(".point-button.enabled.clicked").removeClass("clicked hovered");
        element.addClass("clicked");
      } else {
        clicked_id = -1;
        $(".popup-wrapper").removeClass("pinned show");
        element.removeClass("clicked");           
      }
    }
  });
}

$(document).ready(function () {
  renderPoints();
});