dataForAnalysis = {};

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function drawMap(id, points) {

  var container = L.DomUtil.get("map");

  if (container != null) {
    container._leaflet_id = null;
  }

  document.getElementById(id).innerHTML = "";

  var map = L.map(id, {
    center: [23, 0],
    crs: L.CRS.EPSG3857,
    zoom: 1.5,
    maxZoom: 4,
    zoomControl: true,
    preferCanvas: false,
    scrollWheelZoom: true,
    dragging: true,
    attributionControl: false,
    timeDimension: true,
  }
  );


  L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  var dates = Object.keys(points);
  var heat = L.heatLayer(points[dates[0]], {radius: 10}).addTo(map);

  L.Control.textbox = L.Control.extend({
    onAdd: function(map) {

      var text = L.DomUtil.create('div');
      text.id = "info_text";
      text.innerHTML = "<strong>"+ dates[0] +"</strong>"
      return text;
    },

    onRemove: function(map) {
      // Nothing to do here
    }
  });
  L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
  L.control.textbox({ position: 'bottomleft' }).addTo(map);

  for (let i = 1; i < dates.length-1; i++) {

    await sleep(500);
    heat.setLatLngs(points[dates[i]]);

    document.querySelector("#info_text").innerHTML = dates[i];
    
    if (i == dates.length-2) {
      i = 0;
    }

  }
}

function makeVolumeChart(id, labels, series) {

  var data = {
    labels: labels,
    series: [series]
  };

  var options = {
    fullWidth: true,
    axisX: {showLabel: false,},
    axisY: {showLabel: false,},
    chartPadding: { left: -35 },
    showArea: true
  };

  var chart = new Chartist.Line(id, data, options);

  chart.on('draw', function(data) {
    if (data.type === 'point') {
      var circle = new Chartist.Svg('circle', {
        cx: [data.x],
        cy: [data.y],
        r: [0],
      }, 'ct-circle');
      data.element.replace(circle);
    }})
}

function makeSentimentChart(id, labels, series) {
  var chart = new Chartist.Line(id, {
    labels: labels,
    series: [series]
  }, {
    showArea: true,
    fullWidth: true,
    chartPadding: {
      left: -20,
      bottom: -20,
    },
    width: '100%',
    axisY: {
      showLabel: false,
    },
    axisX: {showLabel: false,},
    plugins: [
      Chartist.plugins.ctThreshold({
        threshold: .5
      })
      ]
  });
}

function makeNarrativesChart(id, labels, series) {

  new Chartist.Line(id, {
    labels: labels,
    series: series
  }, {
    showPoint: false,
    fullWidth: true,
    axisX: {
      showLabel: false,
      showGrid: false
    },
    axisY: {
      showLabel: false,
      showGrid: false
    },
    chartPadding: {
      left: -20,
      bottom: -20
    },
  });
}

function makeNarrativesTableLabel(headerData, percentageData) {

  const headerRow = document.getElementById('header-row');
  headerRow.innerHTML = '';

  for (let i = 0; i < headerData.length; i++) {

    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.id = "cell" + (i+1).toString();
    cell.innerHTML = "<H3>"+ percentageData[i] +"%</H3>" + "<H5>" + headerData[i] + "</H5>";
    headerRow.appendChild(cell);
  }
}

//var id = Math.random().toString(36).slice(2, 7)

var url = "https://atlas.infegy.com/lumen/siteData.json?randomID="
//var url = "siteData.json"
//var url = "https://www.infegy.com/hubfs/Insight%20Briefs/RankingNarratives/siteData.json?randomID="

//fetch(url + id).then(response => {return response.json();}).then(data => {
fetch(url).then(response => {return response.json();}).then(data => {

  dataForAnalysis = data;
  makeSentimentChart(".tiktok-chart3", data['tiktok']['sentiment']['1 day ago']['dates'], data['tiktok']['sentiment']['1 day ago']['data']);

  makeSentimentChart(".twitter-chart3", data['reddit']['sentiment']['1 day ago']['dates'], data['reddit']['sentiment']['1 day ago']['data']);

  makeSentimentChart(".instagram-chart3", data['instagram']['sentiment']['1 day ago']['dates'], data['instagram']['sentiment']['1 day ago']['data']);

  makeNarrativesChart(".narrativesChart", data['reddit']['entities']['1 day ago']['entities'], data['reddit']['entities']['1 day ago']['timelines']);
  makeNarrativesTableLabel(data['reddit']['entities']['1 day ago']['entities'], data['reddit']['entities']['1 day ago']['growth']);


  drawMap("map", data['postCoordinates'])

})
.catch(function(error) {
  console.log(error);
});

const platformButtons = document.querySelectorAll('.platform-button');
const timeframeButtons = document.querySelectorAll('.timeframe-button');

function deselectAllButtons(buttons) {
  buttons.forEach(button => {
    button.classList.remove('selected');
  });
}

function findSelectedButtons(buttons) {

  var buttonID;

  for (let i = 0; i < buttons.length; i++) {

    if (buttons[i].classList.contains('selected')) {
      buttonID = buttons[i].id;
    }

  }

  return buttonID;
}


function handlePlatformButtonClick(event) {

  var dataSource;
  var timeFrame;

  var button = findSelectedButtons(timeframeButtons);

  if (button == "48h-button") {
    timeFrame = '1 day ago';
  }

  if (button == "7d-button") {
    timeFrame = '1 week ago';
  }

  if (button == "30d-button") {
    timeFrame = '1 month ago';
  }

  deselectAllButtons(platformButtons);
  event.target.classList.add('selected');

  if (event.target.id == "twitter-button") {
    dataSource = 'reddit';
  }

  if (event.target.id == "instagram-button") {
    dataSource = 'instagram';    
  }

  if (event.target.id == "tiktok-button") {
    dataSource = "tiktok";
  }

  makeNarrativesChart(".narrativesChart", dataForAnalysis[dataSource]['entities'][timeFrame]['entities'], dataForAnalysis[dataSource]['entities'][timeFrame]['timelines']);
  makeNarrativesTableLabel(dataForAnalysis[dataSource]['entities'][timeFrame]['entities'], dataForAnalysis[dataSource]['entities'][timeFrame]['growth']);

}

function handleTimeframeButtonClick(event) {

  var dataSource;
  var timeFrame;

  var button = findSelectedButtons(platformButtons);

  if (button == "twitter-button") {
    dataSource = 'reddit';
  }

  if (button == "instagram-button") {
    dataSource = 'instagram';
  }

  if (button == "tiktok-button") {
    dataSource = 'tiktok';
  }

  deselectAllButtons(timeframeButtons);
  event.target.classList.add('selected');

  if (event.target.id == "48h-button") {
    timeFrame = '1 day ago';
  }

  if (event.target.id == "7d-button") {
    timeFrame = '1 week ago';    
  }

  if (event.target.id == "30d-button") {
    timeFrame = "1 month ago";
  }

  makeSentimentChart(".tiktok-chart3", dataForAnalysis['tiktok']['sentiment'][timeFrame]['dates'], dataForAnalysis['tiktok']['sentiment'][timeFrame]['data']);

  makeSentimentChart(".twitter-chart3", dataForAnalysis['reddit']['sentiment'][timeFrame]['dates'], dataForAnalysis['reddit']['sentiment'][timeFrame]['data']);

  makeSentimentChart(".instagram-chart3", dataForAnalysis['instagram']['sentiment'][timeFrame]['dates'], dataForAnalysis['instagram']['sentiment'][timeFrame]['data']);

  makeNarrativesChart(".narrativesChart", dataForAnalysis[dataSource]['entities'][timeFrame]['entities'], dataForAnalysis[dataSource]['entities'][timeFrame]['timelines']);
  
  makeNarrativesTableLabel(dataForAnalysis[dataSource]['entities'][timeFrame]['entities'], dataForAnalysis[dataSource]['entities'][timeFrame]['growth']);
}

platformButtons.forEach(button => {
  button.addEventListener('click', handlePlatformButtonClick);
});

timeframeButtons.forEach(button => {
  button.addEventListener('click', handleTimeframeButtonClick);
});

document.getElementById("twitter-button").classList.add('selected');
document.getElementById("48h-button").classList.add('selected');