function isFormilyFileUploaded(){
  var msg = "Files haven't been uploaded yet!\nDo you want to cancel file upload?";

  for(var i = 0; i < Object.keys(window.formilyFiles).length; i++){
    if(window.formilyFiles[i]){
      if(confirm(msg)){
        return true;
      } else {
        return false;
      }
    }
  }
  return true;
}


function filePreview(index){

  var i = index;

  if(window.formilyFiles[index] != undefined) {
    var obj = window.formilyFiles[index];
    var file = obj.file;
    var s, img;
    var reader = new FileReader();

    reader.onload = function(e) {
      if($('.file_upload[data-ff-id="' + i + '"]').length == 0){

        var b = $('input[type="file"][multiple][name="' + window.formilyFiles[i].input_name + '"]');
        var button = document.querySelector('input[type="file"][multiple][name="' + window.formilyFiles[i].input_name + '"]');
        var bText = b.parent(0).find('span');

        window.formilyFilesIndex--;
        bText.text('[' + window.formilyFilesIndex + ' files left]');

        if(file.type.indexOf('image') >= 0) {
          var div = document.createElement("DIV");
          div.setAttribute('class', 'file_upload new_img');
          div.setAttribute('data-ff-id', i);

          img = document.createElement("IMG");
          img.src = e.target.result;

          var node = document.createElement("SPAN");
          var node2 = document.createElement("SPAN");
          node.innerHTML = '&#xe802;';
          node2.innerHTML = '0%';
          node.setAttribute('class', 'delete_button');
          node.setAttribute('style', 'display: none');
          node2.setAttribute('class', 'formily-progress-bar');
          div.appendChild(img);
          div.appendChild(node);
          div.appendChild(node2);

          button.parentElement.parentElement.appendChild(div);
        } else {
          var ftype = window.formilyFiles[i].file.name.match(/.*\.([^.]+)/)[1];
          img = $('<div class="file_upload file new_img" data-ff-id="' + i + '" ><span class="ext_label">' + ftype + '</span><span class="delete_button">&#xe802;</span><span class="formily-progress-bar">0%</span></div>');
          s = b.parent(0).parent(0);
          s.append(img);
        }

        if(window.formilyFilesIndex == 0) {
          bText.text('');

          var index2 = 0;
          formilyFileUpload(index2);
        }
      }

      filePreview(++i);
    };

    reader.readAsDataURL(file);
  } else {
    if(i < Object.keys(window.formilyFiles).length) {
      filePreview(++i);
    }
  }
}

function formilyFileUpload(index) {
  var i = index;

  if(window.formilyFiles[index] != undefined) {
    var obj = window.formilyFiles[index];
    var file = obj.file;

    var image = $('.file_upload[data-ff-id="' + i + '"]');

    var data = new FormData();
    data.append('file', file);
    data.append('user_id', obj.data.user_id);
    data.append('form_id', obj.data.form_id);
    data.append('resource_id', obj.data.resource_id);
    data.append('resource_type', obj.data.resource_type);
    data.append('authenticity_token', obj.data.authenticity_token);
    data.append('input_id', obj.data.input_id);
    data.append('submit_id', obj.data.submit_id);

    var progress = function(e){
      if(e.lengthComputable){
        var max = e.total;
        var current = e.loaded;
        var percentage = (Math.round((current * 100)/max * 10) / 10);

        image.find('span.formily-progress-bar').text(percentage + '%');

        if(percentage >= 100) {
          window.formilyFiles[i] = null;
          formilyFileUpload(++i);
        }
      }
    };

    $.ajax({
      url: FormilyRoutes.form_upload_file_path(),
      type: 'POST',
      data: data,
      success: function (data) {
        image.find('span.formily-progress-bar').hide(0);
        image.find('span.delete_button').show(0);
        image.find('span.delete_button').attr('data-formily-delete-file', '/formily/file/' + data.file_id);
        image.removeClass('new_img');
      },
      error: function(data) {
        image.find('span.formily-progress-bar').hide(0);
      },
      xhr: function(){
        var myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
          myXhr.upload.addEventListener('progress', progress, false);
        }
        return myXhr;
      },
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false
    });

  } else {
    if(i < Object.keys(window.formilyFiles).length) {
      formilyFileUpload(++i);
    }
  }
}

$(document).ready(function() {

  window.formilyFiles = {};
  window.formilyFilesIndex = 0;

  $(document).on('click', 'div.file_upload .delete_button', function(e){
    var self = $(this);
    var fileId = self.data('fileId');
    var parent = self.parents('div.file_upload');
    var csrf = self.parents('form').find('input[type=hidden][name=authenticity_token]').val();

    if(confirm('Delete image ?')){
      if(fileId){
        $.ajax({
          url: FormilyRoutes.form_file_path(fileId),
          type: 'DELETE',
          data: {authenticity_token: csrf},
          success: function (data) {
            parent.remove();
          }
        });
      }else{
        var id = parent.data('ffId');
        window.formilyFiles[id] = undefined;
        parent.remove();
      }
    }

    return false;
  });

  $(document).on('click', 'button[type=button][data-f-multiple]', function(e){
    var self = $(this);

    if(e.originalEvent){
      var btn = self.find('input[type="file"][multiple][name^="formily"]');

      if(btn.length > 0) {
        btn.click();
      }

    }
  });

  $(document).on('change', 'input[type="file"][multiple][name^="formily"]', function(){
    var self = $(this);
    var files = this.files;

    window.formilyFilesIndex = files.length;

    var form = self.parents('form');

    var data = {
      user_id: form.find('input[type=hidden][name=user_id]').val(),
      form_id: form.find('input[type=hidden][name=form_id]').val(),
      resource_id: form.find('input[type=hidden][name=resource_id]').val(),
      resource_type: form.find('input[type=hidden][name=resource_type]').val(),
      authenticity_token: form.find('input[type=hidden][name=authenticity_token]').val(),
      submit_id: form.find('input[type=hidden][name=submit_id]').val(),
      input_id: self.attr('name').match(/\[(\d+)\](\[\])?$/)[1]
    };

    for (var i = 0; i < files.length; i++) {
      // Detect large file
      if(files[i].size/1048576 > 9.5) {
        alert('File: ' + files[i].name + ' is to large !');
        window.formilyFilesIndex--;
      } else {
        window.formilyFiles[Object.keys(window.formilyFiles).length] = {file: files[i], input_name: self.attr('name'), data: data};
      }
    }

    var index = 0;
    filePreview(index);

    self.val('');
  });

});