/* eslint-disable */
if (typeof jQuery === 'undefined') {
  const script = document.createElement('script');
  script.src = '//code.jquery.com/jquery.js';
  document.head.appendChild(script);
}

if (typeof Chart === 'undefined') {
  const 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 startAt = $('#unamiChart').data('start-at');
  var endAt = $('#unamiChart').data('end-at');
  var unit = $('#unamiChart').data('unit');
  var tz = $('#unamiChart').data('tz');
  var shareId = $('#unamiChart').data('share-id');
  var reload = Number($('#unamiChart').data('reload'));
  if ($('#unamiChart').length) {
    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 website = $('#unamiChart').data('website');
  var apiUrl = $('#unamiChart').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}`;
  $.ajax({
    method: 'GET',
    url: url,
    success: function (data) {
      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');
      }
    },
    error: function (error) {
      console.log(error);
    },
  });
}