var OKUpload = function () {
  this.config = $("#uploadConfig").data() || {
    fileMaxbytes: 10 * 1024 * 1024,
    imageMaxbytes: 10 * 1024 * 1024,
    audioMaxbytes: 10 * 1024 * 1024,
    videoMaxbytes: 10 * 1024 * 1024,
  };
  this.fileAction = "/_services/s3/file";
  this.imageAction = "/_services/s3/image";
  this.videoAction = "/_services/s3/video";
  this.audioAction = "/_services/s3/audio";
  this.$progress = $("<div class='progress'>");
  this.xhrCount = 0;
  this.loadCount = 0;
};
OKUpload.prototype.bind = function (rapper) {
  var uploader = this;
  this.rapper = rapper;

  $(this.rapper).append(this.$progress);
  $(".add-image-button input", rapper).change(
    uploader.handleFileSelect.bind(uploader)
  );
  $(".add-url", rapper).on(
    "keydown blur",
    pressEnter(function (e) {
      var url = $(this).val();
      $(this).val("");
      uploader.parse(url);
    })
  );
};
OKUpload.prototype.parse = function (url) {
  if (!url) return;
  var uploader = this;
  Parser.parse(url, function (media) {
    console.log(url, media);
    if (!media) {
      alert("Not a valid link");
    } else if (media.type == "image") {
      uploader.add(media);
    } else {
      uploader.addMedia(media);
    }
  });
};
OKUpload.prototype.handleFileSelect = function (e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;

  for (var i = 0, f; (f = files[i]); i++) {
    this.upload(f);
  }
};
OKUpload.prototype.largeFileError = function (file, maxSize) {
  var your_bytes = bytesToString(file.size);
  var max_bytes = bytesToString(maxSize);
  alert(
    "Sorry, your file is too big.\n\n" +
      file.name +
      "\n\nYour file: " +
      your_bytes +
      "\nMax size: " +
      max_bytes
  );
  function bytesToString(n) {
    if (n < 1024) return n + " bytes";
    n /= 1024;
    if (n < 1024) return n.toFixed(1) + " kb";
    n /= 1024;
    if (n < 1024) return n.toFixed(1) + " mb";
  }
};
OKUpload.prototype.upload = function (f) {
  var field, action;

  if (f.type.match("video.*")) {
    if (this.config.videoMaxbytes && f.size > this.config.videoMaxbytes) {
      return this.largeFileError(f, this.config.videoMaxbytes);
    }
    field = "video";
    action = this.videoAction;
  } else if (f.type.match("audio.*")) {
    if (this.config.audioMaxbytes && f.size > this.config.audioMaxbytes) {
      return this.largeFileError(f, this.config.audioMaxbytes);
    }
    field = "audio";
    action = this.audioAction;
  } else {
    if (this.config.imageMaxbytes && f.size > this.config.imageMaxbytes) {
      return this.largeFileError(f, this.config.imageMaxbytes);
    }
    field = "image";
    action = this.imageAction || this.action;
  }

  this.xhrCount += 1;

  this.$progress.addClass("loading");

  var $loader = $("<div class='xhr'>");
  var $loading_bar = $("<div>");
  $loading_bar.css("width", "0%");
  $loader.append($loading_bar);
  this.$progress.append($loader);

  var fd = new FormData();
  fd.append(field, f);

  var request = new XMLHttpRequest();
  request.open("POST", action, true);

  request.addEventListener("progress", updateProgress.bind(this));
  request.addEventListener("load", transferComplete.bind(this));
  request.addEventListener("error", transferError.bind(this));
  request.addEventListener("abort", transferAbort.bind(this));

  function updateProgress(e) {
    if (e.lengthComputable) {
      var percentComplete = Math.round((100 * e.loaded) / e.total);
      $loading_bar.css("width", percentComplete + "%");
    }
  }
  function transferComplete(data) {
    this.loadCount += 1;
    this.hideUploadBars();
    if (request.readyState == 4 && request.status == 200) {
      var responseData;
      try {
        responseData = JSON.parse(request.responseText);
        this.success(responseData);
      } catch (e) {
        console.log(request.responseText);
        console.log("ERROR PARSING JSON");
      }
    }
    console.log(arguments, request);
  }
  function transferError(data) {
    console.log("Transfer error");
    this.loadCount += 1;
    this.hideUploadBars();
    console.log(arguments);
  }
  function transferAbort(data) {
    console.log("Transfer aborted");
    this.loadCount += 1;
    this.hideUploadBars();
    console.log(arguments);
  }

  request.send(fd);

  /*
  var request = $.ajax({
    url: this.action,
    type: "post",
    data: fd,
    dataType: "json",
    processData: false,
    contentType: false,
  })
  request.done(this.success.bind(this))
*/
};
OKUpload.prototype.hideUploadBars = function () {
  if (this.xhrCount == this.loadCount) {
    this.$progress.removeClass("loading");
    setTimeout(
      function () {
        this.$progress.empty();
      }.bind(this),
      300
    );
  }
};
OKUpload.prototype.success = function (data) {
  if (data.error) {
    console.log(data.error);
    return;
  }
  var url = data.url;
  console.log(url);
  this.parse(url);
};
OKUpload.prototype.add = function (media) {
  console.log(media);
};
OKUpload.prototype.addMedia = function (media) {
  console.log(media);
};
OKUpload.prototype.error = function (error) {
  throw error;
};

function pressEnter(fn) {
  return function (e) {
    if (e.keyCode && e.keyCode !== 13) return;
    e.preventDefault();
    fn.apply(this);
  };
}