// error elements
var error = document.querySelector('.review-fields');
var errorName = error.querySelector('.review-fields-name');
var errorText = error.querySelector('.review-fields-text');

// form elements
var form = document.querySelector('.review-form');
var marks = form.elements['review-mark'];
var name = form.elements['review-name'];
var text = form.elements['review-text'];

// validation state
var hasBadMark = false;
var hasNameError = false;
var hasTextError = false;

/**
 * Updates variables, which represent validation state
 */
function validate() {
  hasBadMark = marks.value < 4;
  hasNameError = !name.value;
  hasTextError = hasBadMark && !text.value;
}

/**
 * Toggles invisible class for given element
 * @param {Element} el
 * @param {boolean} enable
 */
function setElementShown(el, enable) {
  if (enable) {
    el.classList.add('invisible');
  } else {
    el.classList.remove('invisible');
  }
}

/**
 * Handles all form changes
 * @param {Event} evt
 */
function changeHandler(evt) {
  validate();
  text.required = hasBadMark;
  setElementShown(errorName, hasNameError);
  setElementShown(errorText, hasTextError);
  setElementShown(error, !hasNameError && !hasTextError);
}

from.addEventListener('change', changeHandler);