import document from "document";
import { today } from "user-activity";
import { goals } from "user-activity";

const placeholderText = '···';

const healthLabels = {
  steps: document.getElementById('stepsText').getElementById('healthTextLabel'),
  cal: document.getElementById('calText').getElementById('healthTextLabel'),
  dist: document.getElementById('distText').getElementById('healthTextLabel'),
  elev: document.getElementById('elevText').getElementById('healthTextLabel'),
  actmin: document.getElementById('actminText').getElementById('healthTextLabel')
}

const touchArea = document.getElementById("touchArea");
const overlay = document.getElementById('overlay');
const overlayShadeInstance = document.getElementById("overlayShadeInstance");
const healthTextInstances = document.getElementsByClassName("healthTextInstance");

let hasOverlay = false;
let overlayTimer;

function getActivityNumber(activity) {
  let values = {raw: 0, display: placeholderText};
  
  switch (activity) {
    case 'steps':
      values.raw = (today.adjusted.steps || 0);
      values.display = addcommas(values.raw);
      break;
    case 'cal':
      values.raw = (today.adjusted.calories || 0);
      values.display = addcommas(values.raw);
      break;
    case 'dist':
      values.raw = (today.adjusted.distance || 0);
      values.display = (Math.round(values.raw/10)/100 || 0);
      break;
    case 'elev':
      values.raw = values.display = (today.adjusted.elevationGain || 0);
      break;
    case 'actmin':
      values.raw = (today.adjusted.activeMinutes || 0);
      values.display = addcommas(values.raw);
      break;
  };
  return values;
}

function addcommas(nStr) {
    if (nStr < 1000) { return nStr; }
    nStr += '';
    let x = nStr.split('.');
    let x1 = x[0];
    let x2 = x.length > 1 ? '.' + x[1] : '';
    let rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

function updateOverlay() {
  console.log("Updating Health Overlay Labels");
  healthLabels.steps.text = getActivityNumber('steps').display;
  healthLabels.cal.text = getActivityNumber('cal').display;
  healthLabels.dist.text = getActivityNumber('dist').display;
  healthLabels.elev.text = getActivityNumber('elev').display;
  healthLabels.actmin.text = getActivityNumber('actmin').display;
}

function addOverlay() {
  updateOverlay();
  overlay.style.display = 'inline';
  hasOverlay = true;
  overlayTimer = setTimeout(() => {
    removeOverlay();
  },6000);
  document.getElementById('overlayShadeInstance').animate('enable');
  for(let i in healthTextInstances) {
    setTimeout(() => {
      healthTextInstances[i].animate('enable');
    }, 200+i*100);
  }
}

function addOverlay() {
  updateOverlay();
  overlay.style.display = 'inline';
  hasOverlay = true;
  overlayTimer = setTimeout(() => {
    removeOverlay();
  },6000);
  document.getElementById('overlayShadeInstance').animate('enable');
  for(let i in healthTextInstances) {
    setTimeout(() => {
      healthTextInstances[i].animate('enable');
    }, 200+i*100);
  }
}

function removeOverlay() {
  clearTimeout(overlayTimer);
  overlayShadeInstance.animate('disable');
  for(var i = 0; i < healthTextInstances.length; i++) {
    healthTextInstances[i].animate('disable');
  }
  setTimeout(() => {
    overlay.style.display = 'none';
  }, 100);
  hasOverlay = false;
}

export function init() {
  console.log("Health Overlay Loaded");
  touchArea.onclick = (e) => {
    console.log("Tap Detected");
    if (hasOverlay == false) {
      addOverlay();
    } else {
      removeOverlay();
    }
  }
}

export function continuousUpdate(ms) {
  console.log("Activated Continuous Updates");
  setInterval(() => {
    if (hasOverlay) {
      updateOverlay();
    }
  }, ms);
}