(function() {
  'use strict';

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

  // allows for multiple file uploads with separate inputs
  window.utils.initializeFileUpload = function(input) {
    var isMulti = input.hasAttribute('multiple');
    var fileList = addFileList();
    var label = addFileLabel();

    function renderFileList(files) {
      fileList.innerHTML = '';
      Array.from(files).forEach(function(file, index) {
        var fileDisplayEl = document.createElement('li');
        fileDisplayEl.innerHTML = file.name;
        fileList.appendChild(fileDisplayEl);
      });
    }

    function updateLabel(files) {
      if (isMulti) {
        label.innerText = files.length + ' Dateien ausgwählt';
      } else {
        label.innerHTML = files[0].name;
      }
    }

    function addFileList() {
      var list = document.createElement('ol');
      list.classList.add('file-input__list');
      input.parentElement.appendChild(list);
      return list;
    }

    function addFileLabel() {
      var label = document.createElement('label');
      label.classList.add('file-input__label');
      // interpolate translated String here
      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
      label.setAttribute('for', input.id);
      input.parentElement.insertBefore(label, input);
      return label;
    }

    function addMultiInfo() {
      var info = document.createElement('div');
      info.classList.add('file-input__info');
      // interpolate translated String here
      info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
      input.parentElement.insertBefore(info, input);
    }

    // initial setup
    input.classList.add('file-input__input--hidden');
    if (isMulti) {
      addMultiInfo();
    }
    input.addEventListener('change', function() {
      if (isMulti) {
        renderFileList(input.files);
      }

      updateLabel(input.files);
    });
  }

  // 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) {
    window.utils.initializeFileUpload(inp);
  });

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