(function() {
  'use strict';

  window.utils = window.utils || {};

  // allows for multiple file uploads with separate inputs
  window.utils.reactiveFileUpload = function(input, formGroup) {
    var currValidInputCount = 0;
    var addMore = false;
    var inputName = input.getAttribute('name');
    var isMulti = input.hasAttribute('multiple') ? true : false;
    var wrapper = formGroup;
    // FileInput PseudoClass
    function FileInput(container, input, label, remover) {
      this.container = container;
      this.input = input;
      this.label = label;
      this.remover = remover;
      addListener(this);

      this.addTo = function(parentElement) {
        parentElement.appendChild(this.container);
      }
      this.remove = function() {
        this.container.remove();
      }
      this.wasValid = function() {
        return this.container.classList.contains('file-input__container--valid');
      }
    }
    function addNextInput() {
      var inputs = wrapper.querySelectorAll('.file-input__container');
      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
        makeInput(inputName).addTo(wrapper);
      }
    }
    // updates submitbutton and form-group-stripe
    function updateForm() {
      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
      formGroup.classList.remove('form-group--has-error');
      if (currValidInputCount > 0) {
        if (formGroup.classList.contains('form-group')) {
          formGroup.classList.add('form-group--valid')
        }
        if (isMulti) {
          addNextInput();
        }
      } else {
        if (formGroup.classList.contains('form-group')) {
          formGroup.classList.remove('form-group--valid')
        }
      }
    }
    // addseventlistener destInput
    function addListener(fileInput) {
      fileInput.input.addEventListener('change', function(event) {
        if (fileInput.input.value.length > 0) {
          // update label
          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
          var fileName = filePath[filePath.length - 1];
          fileInput.label.innerHTML = fileName;
          // increase count if this field was empty previously
          if (!fileInput.wasValid()) {
            currValidInputCount++;
          }
          fileInput.container.classList.add('file-input__container--valid')
          // show next input
        } else {
          if (isMulti) {
            currValidInputCount--;
          }
          clearInput(fileInput);
        }
        updateForm();
      });
      fileInput.input.addEventListener('focus', function() {
        fileInput.container.classList.add('pseudo-focus');
      });
      fileInput.input.addEventListener('blur', function() {
        fileInput.container.classList.remove('pseudo-focus');
      });
      fileInput.remover.addEventListener('click', function() {
        if (fileInput.wasValid()) {
          currValidInputCount--;
        }
        clearInput(fileInput);
      });
    }

    // clears or removes fileinput based on multi-file or not
    function clearInput(fileInput) {
      if (isMulti) {
        fileInput.remove();
      } else {
        fileInput.container.classList.remove('file-input__container--valid')
        fileInput.label.innerHTML = '';
      }
      updateForm();
    }
    // create new wrapped input element with name name
    function makeInput(name) {
      var cont =      document.createElement('div');
      var desc =      document.createElement('label');
      var nextInput = document.createElement('input');
      var remover =   document.createElement('div');
      cont.classList.add('file-input__container');
      desc.classList.add('file-input__label', 'btn');
      nextInput.classList.add('js-file-input');
      desc.setAttribute('for', name + '-' + currValidInputCount);
      remover.classList.add('file-input__remover');
      nextInput.setAttribute('id', name + '-' + currValidInputCount);
      nextInput.setAttribute('name', name);
      nextInput.setAttribute('type', 'file');
      cont.appendChild(nextInput);
      cont.appendChild(desc);
      cont.appendChild(remover);
      return new FileInput(cont, nextInput, desc, remover);
    }
    // initial setup
    function setup() {
      var newInput = makeInput(inputName);
      if (isMulti) {
        wrapper = document.createElement('div');
        wrapper.classList.add('file-input__wrapper');
        console.log(wrapper);
        // TODO: fix file input
        formGroup.insertBefore(wrapper, input);
      }
      input.remove();
      newInput.addTo(wrapper);
      updateForm();
    }
    setup();
  }

  // to remove previously uploaded files
  window.utils.reactiveFileCheckbox = function(input) {
    // adds eventlistener(s)
    function addListener(container) {
      input.addEventListener('change', function(event) {
        container.classList.toggle('file-checkbox__container--checked', this.checked);
      });
    }

    // initial setup
    function setup() {
      var cont = input.parentNode;
      while (cont !== document.body) {
        if (cont.classList.contains('file-checkbox__container')) {
          break;
        }
        cont = cont.parentNode;
      }

      // take care of properly moving elements
      if (input.parentNode.classList.contains('checkbox')) {
        input.parentNode.classList.add('file-checkbox__checkbox');
      } else {
        input.classList.add('file-checkbox__checkbox');
      }
      addListener(cont);
    }
    setup();
  }

  window.utils.initializeCheckboxRadio = function(input, type) {

    if (!input.parentElement.classList.contains(type)) {
      var parentEl = input.parentElement;
      var wrapperEl = document.createElement('div');
      var labelEl = document.createElement('label');
      wrapperEl.classList.add(type);
      labelEl.setAttribute('for', input.id);
      wrapperEl.appendChild(input);
      wrapperEl.appendChild(labelEl);

      parentEl.appendChild(wrapperEl);
    }
  }

})();

document.addEventListener('DOMContentLoaded', function() {

  // initialize checkboxes
  Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(inp) {
    window.utils.initializeCheckboxRadio(inp, 'checkbox');
  });

  // initialize radios
  Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(inp) {
    window.utils.initializeCheckboxRadio(inp, 'radio');
  });

  // initialize file-upload-fields
  Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
    var formGroup = inp.parentNode;
    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
      formGroup = formGroup.parentNode;
    }
    window.utils.reactiveFileUpload(inp, formGroup);
  });

  // initialize file-checkbox-fields
  Array.from(document.querySelectorAll('.js-file-checkbox')).forEach(function(inp) {
    window.utils.reactiveFileCheckbox(inp);
  });
});