var primary = document.getElementById('primary');
var font = document.getElementById('font');
var text = document.getElementById('text-test');
var select = document.getElementById('select-font');
var level = document.getElementById('level');
var infoTrigger = document.querySelector('.info-trigger');
var info = document.querySelector('.info');
var topMenu = document.querySelector('.menu-top');
var bottomMenu = document.querySelector('.menu-bottom');
var colorFont = '#fff';
var colorPrimary = '#2f30d8';
var fontSize = select.options[select.selectedIndex].value;
var resultRatio = 21;

// Set Defaults
level.textContent = "AAA";
level.style.color = 'green';
text.textContent = "Happy Bazinga!"

infoTrigger.addEventListener('mouseover', function(){
  if(!info.classList.contains('active')) {
    info.classList.add('active');
  }
});

infoTrigger.addEventListener('mouseleave', function(){
  if(info.classList.contains('active')) {
    info.classList.remove('active');
  }
});

select.addEventListener('input', function(){
  fontSize = select.options[select.selectedIndex].value;
  text.style.fontSize = fontSize;
  levelWCAG(resultRatio);
})

AColorPicker.from('#primary').on('change', (picker, color) => {
  var ratio = document.getElementById('ratio');
  var brightness = document.getElementById('brightness');
  colorPrimary = picker.rgbhex;
  document.documentElement.style.setProperty('--background-color', color);
  
  resultRatio = getContrast(colorPrimary, colorFont);
  var resultBrightness = getBrightness(colorPrimary);

  ratio.textContent = resultRatio;

  levelWCAG(resultRatio);
  
  if(resultBrightness < 125) {
       brightness.textContent = "Black ";
       topMenu.style.background = "#fff";
       bottomMenu.style.background = "#fff";
     } else {
       brightness.textContent = "White ";
       topMenu.style.background = "#000";
       bottomMenu.style.background = "#000";
     }
  return colorPrimary;
  return resultRatio;
});

AColorPicker.from('#font').on('change', (picker, color) => {
  var ratio = document.getElementById('ratio');
  colorFont = picker.rgbhex;

  resultRatio = getContrast(colorPrimary, colorFont);

  ratio.textContent = resultRatio;
  document.documentElement.style.setProperty('--font-color', color);

  levelWCAG(resultRatio);
  
  return colorFont;
  return resultRatio;
});

var getContrast = function(background, foreground) {

  // Convert hex to rgb
  // Credit to Denis http://stackoverflow.com/a/36253499/4939630
  var backgroundRGB = 'rgb(' + (background = background.replace('#', '')).match(new RegExp('(.{' + background.length/3 + '})', 'g')).map(function(l) { return parseInt(background.length%2 ? l+l : l, 16); }).join(',') + ')';

  var foregroundRGB = 'rgb(' + (foreground = foreground.replace('#', '')).match(new RegExp('(.{' + foreground.length/3 + '})', 'g')).map(function(l) { return parseInt(foreground.length%2 ? l+l : l, 16); }).join(',') + ')';

  // Get array of RGB values
  var backgroundRGBArray = backgroundRGB.replace(/[^\d,]/g, '').split(',');
  var foregroundRGBArray = foregroundRGB.replace(/[^\d,]/g, '').split(',');

  function luminance(r, g, b) {
      var a = [r, g, b].map(function (v) {
          v /= 255;
          return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
      });
      return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
  }

  function floor(number, decimals) {
    decimals = +decimals || 0;

    var multiplier = Math.pow(10, decimals);

    return Math.floor(number * multiplier) / multiplier;
}

  function contrast(el1, el2) {
    l1 = (luminance(el1[0], el1[1], el1[2]) + 0.05);
    l2 =(luminance(el2[0], el2[1], el2[2]) + 0.05);
    ratio = l1/l2;

    if (l2 > l1) {
      ratio = 1 / ratio;
    } 
    
    return floor(ratio, 2);
  }
  
  var contrast = contrast(backgroundRGBArray, foregroundRGBArray);
  return contrast;
}

var getBrightness = function(hex) {

    // Convert hex to rgb
    // Credit to Denis http://stackoverflow.com/a/36253499/4939630
    var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';

    // Get array of RGB values
    rgb = rgb.replace(/[^\d,]/g, '').split(',');

    var r = rgb[0], g = rgb[1], b = rgb[2];

    var brightness = Math.floor((r * 299 + g * 587 + b * 114) / 1000);
    
    return brightness;
}

var levelWCAG = function(resultRatio){
   var ratio = document.getElementById('ratio');
   if(resultRatio >= 4.5 && fontSize === "18px" && resultRatio < 7) {
      ratio.style.color = 'green';
      level.textContent = "AA";
      text.textContent = "Bazinga!";
     } else if(resultRatio >= 3 && fontSize === "24px" && resultRatio < 4.5) {
      ratio.style.color = 'green';
      level.textContent = "AA";
      text.textContent = "Bazinga!";
     } else if(resultRatio >= 7 && fontSize === "18px") {
      ratio.style.color = 'green';
      level.textContent = "AAA";
      text.textContent = "Happy Bazinga!";
     } else if(resultRatio >= 4.5 && fontSize === "24px") {
      ratio.style.color = 'green';
      level.textContent = "AAA";
      text.textContent = "Happy Bazinga!";
     } else {
      ratio.style.color = 'red';
      level.textContent = "Nope";
      text.textContent = "Sad Bazinga...";
     }
  
     if(level.textContent !== "Nope") {
       level.style.color = 'green';
     } else {
       level.style.color = 'black';
     }
}