/* eslint-disable */

if (typeof Chart === 'undefined') {
  var script = document.createElement('script');
  script.src = '//cdn.jsdelivr.net/npm/chart.js';
  script.onload = function () {
    window.unamiChart = false;
    loadUnamiStat();
  };
  document.head.appendChild(script);
}

function loadUnamiStat() {
  var unamiChart = document.getElementById('unamiChart');
  if (unamiChart) {
    var startAt = unamiChart.getAttribute('data-start-at');
    var endAt = unamiChart.getAttribute('data-end-at');
    var unit = unamiChart.getAttribute('data-unit');
    var tz = unamiChart.getAttribute('data-tz');
    var shareId = unamiChart.getAttribute('data-share-id');
    var reload = Number(unamiChart.getAttribute('data-reload'));
    loadUnamiDataAjax(startAt, endAt, unit, tz, shareId);
    if (reload > 0) {
      setInterval(function () {
        loadUnamiDataAjax(startAt, endAt, unit, tz, shareId);
      }, 1000 * reload);
    }
  } else {
    alert('canvas#unamiChart does not exist!');
  }
}

function loadUnamiDataAjax(startAt, endAt, unit, tz, shareId) {
  if (startAt == 'auto') {
    startAt = new Date() * 1 - 24 * 3600 * 1000;
  }
  if (endAt == 'auto') {
    endAt = new Date() * 1;
  }
  var unamiChart = document.getElementById('unamiChart');
  var website = unamiChart.getAttribute('data-website');
  var apiUrl = unamiChart.getAttribute('data-url');
  var chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: { position: 'top' },
    scales: { x: { stacked: true }, y: { stacked: true } },
  };
  var url = `${apiUrl}/api/websites/${website}/pageviews?start_at=${startAt}&end_at=${endAt}&unit=${unit}&tz=${tz}&shareId=${shareId}`;

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function () {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      var labels = data.pageviews.map(p => {
        var date = new Date(p.t);
        var hours = date.getHours();
        return `${hours === 0 ? 12 : hours > 12 ? hours - 12 : hours}${hours < 12 ? 'AM' : 'PM'}`;
      });

      var pageviewsData = data.pageviews.map(p => p.y);
      var sessionsData = data.sessions.map(s => s.y);

      var chartData = {
        labels: labels,
        datasets: [
          {
            label: 'Unique visitors',
            data: sessionsData,
            backgroundColor: 'rgba(38, 128, 235, 0.6)',
            borderColor: 'rgba(38, 128, 235, 0.7)',
          },
          {
            label: 'Page views',
            data: pageviewsData,
            backgroundColor: 'rgba(38, 128, 235, 0.4)',
            borderColor: 'rgba(38, 128, 235, 0.5)',
          },
        ],
      };

      if (!window.unamiChart) {
        var ctx = document.getElementById('unamiChart').getContext('2d');
        window.unamiChart = new Chart(ctx, {
          type: 'bar',
          data: chartData,
          options: chartOptions,
        });
      } else {
        window.unamiChart.data = chartData;
        window.unamiChart.update('none');
      }
    } else {
      console.log('Request failed.  Returned status of ' + xhr.status);
    }
  };
  xhr.send();
}