// Stretch goals:
// - Make sure that the house & decorations all stay on one line, even if there are a lot of decorations.
// - Allow the user to select different decorations.

// Task:
// Write a function to add decorations (e.g. ☃️, 🎄, etc) next to the house when the switch is toggled. 

const house = document.getElementById("house");
const decorator = document.getElementById("decorator-switch");
const selectDecorations = document.getElementById("select-decorations");
const decorContainer = document.getElementById("decor-container");
const decorLeftCheck = document.getElementById("decore-position-left");
const decorRightCheck = document.getElementById("decore-position-right");
const addDecorationBtn = document.getElementById("add-btn");
const displayError = document.getElementById('error');


let decorationEmojis = ['🏡'];


function loadDefaults() {
  decorContainer.classList.remove("show-container");
  decorationEmojis = ['🏡'];
  house.textContent = decorationEmojis[0];
  console.log(decorationEmojis);
}

function deckTheHalls() {
  if (decorator.checked) {
    decorLeftCheck.checked = false;
    decorRightCheck.checked = false;
    decorContainer.classList.add("show-container");
    let decorationContents = '';
    decorationEmojis.forEach(element => {
      decorationContents += element;
      console.log(element);
    });
    house.textContent = decorationContents;
  } else {
    loadDefaults();
    console.log('defaults');
  }
}

function addDecoration() {
  if (decorLeftCheck.checked || decorRightCheck.checked) {
    displayError.classList.remove('show-error');
    addDecorPosition()
    let decorationContents = '';
    decorationEmojis.forEach(element => {
      decorationContents += element;
      console.log(element);
    });
    house.textContent = decorationContents;
  }
  else {
    showErrorMsg();
  }
}

function addDecorPosition() {
  if (decorLeftCheck.checked) {
    decorationEmojis.unshift(selectDecorations.value);
  }
  if (decorRightCheck.checked) {
    decorationEmojis.push(selectDecorations.value);
  }
}

function showErrorMsg() {
  displayError.classList.add('show-error');
  displayError.classList.add('error-transition');
  setTimeout(function () {
    displayError.classList.remove('show-error');
    displayError.classList.remove('error-transition');
  }, 3000);
  console.log('error');
}


addDecorationBtn.addEventListener("click", addDecoration);
decorator.addEventListener("click", deckTheHalls);