const inputs = document.querySelectorAll(".controls input");
 const eyeInput = document.getElementById("color")
 const noseInput = document.getElementById("color3")
 const buttonInput = document.getElementById("color2")
 const scarfInput = document.getElementById("color4")
 const armInput = document.getElementById("color5")
 const eyes = document.querySelectorAll(".eye")
 const pupils = document.querySelectorAll('.pupil')
 const nose = document.querySelector('.nose')
 const buttons = document.querySelectorAll('.button')
 const scarf = document.querySelector('.scarf')
 const armLeft = document.querySelector('.left-arm')
 const armRight = document.querySelector('.right-arm')
 const noseSelector = document.getElementById('nose-selector')
 const hatButton = document.querySelector('.hat-btn')
 const hatSelector = document.getElementById('select-hat')
 const hat = document.querySelector('.hat')
 const maskBtn = document.querySelector('.mask-btn')
 const mask = document.querySelector('.mask')
 
eyeInput.addEventListener("change", updateEyeColor)
noseInput.addEventListener("change", updateNoseColor)
buttonInput.addEventListener("change", updateButtonColor)
scarfInput.addEventListener("change", updateScarfColor)
armInput.addEventListener("change", updateArmColor)
noseSelector.addEventListener("change", updateNoseShape)


hatButton.addEventListener("click", ()=>{
    hat.classList.toggle('active')
    if(hat.classList.contains('active')){
    hatSelector.disabled = false
    hatButton.textContent = 'Remove the Hat'
    hatButton.setAttribute("aria-expanded", true)
    } else {
        hatSelector.disabled = true
        hatButton.textContent = 'Add a Hat'
        hatButton.setAttribute("aria-expanded", false)
    }
})
hatSelector.addEventListener("change", updateHatColor)

maskBtn.addEventListener("click", ()=>{
    mask.classList.toggle('active')
    if(mask.classList.contains('active')){
    maskBtn.textContent = 'Remove the Facemask'
    maskBtn.setAttribute("aria-expanded", true)
    } else {
        maskBtn.textContent = 'Add a Facemask'
        maskBtn.setAttribute("aria-expanded", false)
    }
})

// Task:
// Write a function to update the snowman colors according to the colors selected from the pickers.
function updateEyeColor(){
  eyes.forEach((eye) => (eye.style.background = eyeInput.value))
//   pupils.forEach((pupil)=>(pupil.style.background = '#fff'))
}
function updateNoseColor(){
  nose.style.borderColor = `transparent transparent transparent ${noseInput.value}`
}
function updateButtonColor(){
  buttons.forEach((button) => (button.style.background = buttonInput.value)
  )}
function updateScarfColor(){
  scarf.style.background = scarfInput.value
}
function updateArmColor(){
  armLeft.style.background = armInput.value
  armRight.style.background = armInput.value
}

function updateNoseShape(){
    if(noseSelector.value === 'Rectangle') {
        nose.classList.add('rectangle')
    } else if(noseSelector.value === 'Star'){
        nose.classList.add('star')
    } else {
        nose.classList.remove('rectangle')
        nose.classList.remove('star')
    }
}
function updateHatColor(){
    if(hatSelector.value === 'Christmassy') {
        hat.classList.add('christmassy')
    } else if(hatSelector.value === 'Crazy'){
        hat.classList.add('crazy')
    } else {
        hat.classList.remove('christmassy')
        hat.classList.remove('crazy')
    }
}

  



// 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.