* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: #222;
}
.app {
  padding: 15px 15px 50px 15px;
}
.app-preview-text {
  text-transform: uppercase;
}
.app-control input {
  padding: 5px 10px;
}
.app-control-item {
  display: block;
  margin-bottom: 10px;
}
.app-undo-redo button {
  padding: 5px 10px;
  margin-right: 10px;
}

document.addEventListener("DOMContentLoaded", function() {
  const $ = document.querySelector.bind(document); 
  const _form = $("#myForm");
  const _btnUndo = $("#btn-undo");
  const _btnRedo = $("#btn-redo");
  const _btnClear = $("#btn-clear");
  const _txtPreview = $("#txt-preview");
  const _content = $("#content");
  const _color = $("#color");
  
  const textDefault = "undo-redo";
  const colorDefault = "#222222";
  const undoRedoHandler = new UndoRedoHandler({
    text: textDefault,
    color: colorDefault
  });
  
  init();
  
  _form.addEventListener("submit", function(event) {
    event.preventDefault();
    applyPreview(_content.value, _color.value);
    
    undoRedoHandler.insert({
      text: _content.value,
      color: _color.value
    });
  });
  
  _btnClear.addEventListener("click", function(event) {
    undoRedoHandler.clear();
  });
  
  _btnUndo.addEventListener("click", function(event) {
    const state = undoRedoHandler.getPrevState();
    
    if (state) {
      applyPreview(state.text, state.color);
    }
  });
  
  _btnRedo.addEventListener("click", function(event) {
    const state = undoRedoHandler.getNextState();
    
    if (state) {
      applyPreview(state.text, state.color);
    }
  });
  
  function init() {
    _content.value = textDefault;
    _color.value = colorDefault;
    applyPreview(_content.value, _color.value);
  }
  
  function applyPreview(text, color) {
    _txtPreview.textContent = text;
    _txtPreview.style.color = color;
  }
});