const inputs = document.querySelectorAll(".controls input");
const pupil = document.querySelector('.pupil') 
const eyeColor = document.getElementById('eye-color') 
const color2 = document.getElementById('color2')
const color3 = document.getElementById('color3')
const scarf = document.getElementById('scarf')
const arms = document.getElementById('arms')
const christmasScarf = document.querySelector('.christmas-scarf')
const lArm = document.querySelector('.snowman-hand-left')
const rArm = document.querySelector('.snowman-hand-right')
const eyeColorWarning = document.getElementById("eye-color-warning")
const hat = document.getElementById("hat-select")
const hatContainer = document.getElementById("hat-container")
let root = document.documentElement;

hat.addEventListener('change',function(){
  if(hat.value === "snowman-hat"){
    hatContainer.classList.add("snowman-hat")
    hatContainer.classList.remove("santa-hat")
    hatContainer.classList.remove("sauce-pan")
  }
  if(hat.value === "santa-hat"){
    hatContainer.classList.remove("snowman-hat")
    hatContainer.classList.add("santa-hat")
    hatContainer.classList.remove("sauce-pan")
  }
  if(hat.value === "sauce-pan"){
    hatContainer.classList.remove("snowman-hat")
    hatContainer.classList.remove("santa-hat")
    hatContainer.classList.add("sauce-pan")
  }
  if(hat.value === "no-hat"){
    hatContainer.classList.remove("snowman-hat")
    hatContainer.classList.remove("santa-hat")
    hatContainer.classList.remove("sauce-pan")
  }
})

color3.addEventListener('change', function(e){
  root.style.setProperty('--color3',e.target.value)
})
color2.addEventListener('change', function(e){
  root.style.setProperty('--color2',e.target.value)
})

scarf.checked = false
scarf.addEventListener('change',function(){
  if(scarf.checked){
    christmasScarf.classList.remove("hide")
  } else{
    christmasScarf.classList.add("hide")
  }
})

arms.checked = false
arms.addEventListener('change',function(){
  if(arms.checked){
    lArm.classList.remove('hide')
    rArm.classList.remove('hide')
  } else{
     lArm.classList.add('hide')
      rArm.classList.add('hide')
  }
})



eyeColor.addEventListener('change',function(e){
  let pupilColor = window.getComputedStyle(pupil).backgroundColor
  let hexPupilColor = rgb2hex(pupilColor)
  
  const rgbEyeColor =  hexToRgb(e.target.value)
  const rgbPupilColor =  hexToRgb(hexPupilColor)
  
  const color1luminance = luminance(rgbEyeColor.r,rgbEyeColor.g,rgbEyeColor.b);
  const color2luminance = luminance(rgbPupilColor.r,rgbPupilColor.g,rgbPupilColor.b);
  
  const ratio = color1luminance > color2luminance 
    ? ((color2luminance + 0.05) / (color1luminance + 0.05))
    : ((color1luminance + 0.05) / (color2luminance + 0.05));
    
  const result = ratio < 1/4.5 ? "PASS" : "FAIL";
  if(result === "PASS"){
    root.style.setProperty('--color',e.target.value)
    eyeColorWarning.classList.add('hide')
  } else{
    eyeColorWarning.classList.remove('hide')
  }
  
})

let hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
// Task:
// Write a function to update the snowman colors according to the colors selected from the pickers.

// Stretch goals:
// - Add other items eg scarf, arms, etc.
// - Add different options for nose shape, or hats.
// - Check for contrast between pupils and eye color.
function hexToRgb(hex) {
    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });
  
    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }
  
  
 function luminance(r, g, b) {
    let 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;
}