define(['underscore',
        'jquery',
        'backbone',
        "models/DataONEObject",
        'collections/ObjectFormats',
        "Dropzone",
        "text!templates/imageUploader.html",
        "corejs"],
function(_, $, Backbone, DataONEObject, ObjectFormats, Dropzone, Template, corejs){

  /**
  * @class ImageUploaderView
  * @classdesc A view that allows a person to upload an image to the repository
  * @classcategory Views
  */
  var ImageUploaderView = Backbone.View.extend(
    /** @lends ImageUploaderView.prototype */{

    /**
    * The type of View this is
    * @type {string}
    */
    type: "ImageUploader",

    /**
    * The HTML tag name to use for this view's element
    * @type {string}
    */
    tagName: "div",

    /**
    * The HTML classes to use for this view's element
    * @type {string}
    */
    className: "image-uploader",

    /**
    * The DataONEObject or PortalImage that is being edited
    * @type {DataONEObject|PortalImage}
    */
    model: undefined,

    /**
    * The URL for the image. If a DataONEObject model is provided to the view
    * instead, the url is automatically set to the output of DataONEObject.url()
    * @type {string}
    */
    url: undefined,

    /**
    * Text to instruct the user how to upload an image
    * @type {string[]}
    */
    uploadInstructions: ["Drag & drop an image or click here to upload"],

    /**
    * The maximum display height of the image preview. This is only used for the
    * css height propery, and doesn't influence the size of the saved image. If
    * set to false, no css height property is set.
    * @type {number}
    */
    height: false,

    /**
    * The display width of the image preview. This is only used for the
    * css width propery, and doesn't influence the size of the saved image. If
    * set to false, no css width property is set.
    * @type {number}
    */
    width: false,

    /**
     * The minimum required height of the image file. If set, the uploader will
     * reject images that are shorter than this. If null, any image height is
     * accepted.
     * @type {number}
     */
    minHeight: null,

    /**
     * The minimum required height of the image file. If set, the uploader will
     * reject images that are shorter than this. If null, any image height is
     * accepted.
     * @type {number}
     */
    minWidth: null,

    /**
     * The maximum height for uploaded files. If a file is taller than this, it
     * will be resized without warning before being uploaded. If set to null,
     * the image won't be resized based on height (but might be depending on
     * maxWidth).
     * @type {number}
     */
    maxHeight: null,

    /**
     * The maximum width for uploaded files. If a file is wider than this, it
     * will be resized without warning before being uploaded. If set to null,
     * the image won't be resized based on width (but might be depending on
     * maxHeight).
     * @type {number}
     */
    maxWidth: null,

    /**
     * The HTML tag name to insert the uploaded image into. Options are "img",
     * in which case the image is inserted as an HTML <img>, or "div", in which
     * case the image is inserted as the background of a div.
     * @type {string}
     */
    imageTagName: "div",

    /**
    * References to templates for this view. HTML files are converted to Underscore.js templates
    */
    template: _.template(Template),

    /**
    * The events this view will listen to and the associated function to call.
    * @type {Object}
    */
    events: {
      "mouseover .icon-remove.remove"  : "previewImageRemove",
      "mouseout  .icon-remove.remove"  : "previewImageRemove"
    },

    /**
    * Creates a new ImageUploaderView
    * @param {Object} options - A literal object with options to pass to the view
    * @property {DataONEObject}  options.model - Gets set as ImageUploaderView.model
    * @property {string[]}  options.uploadInstructions - Gets set as ImageUploaderView.uploadInstructions
    * @property {string}  options.url - Gets set as ImageUploaderView.url
    * @property {string}  options.imageTagName - Gets set as ImageUploaderView.imageTagName
    * @property {number}  options.height - Gets set as ImageUploaderView.height
    * @property {number}  options.width - Gets set as ImageUploaderView.width
    * @property {number}  options.minWidth - Gets set as ImageUploaderView.minWidth
    * @property {number}  options.minHeight - Gets set as ImageUploaderView.minHeight
    * @property {number}  options.maxWidth - Gets set as ImageUploaderView.maxWidth
    * @property {number}  options.maxHeight - Gets set as ImageUploaderView.maxHeight
    */
    initialize: function(options){

      try {
        if( typeof options == "object" ){

          this.model              = options.model;
          this.uploadInstructions = options.uploadInstructions;
          this.url                = options.url;
          this.imageTagName       = options.imageTagName;
          this.height             = options.height;
          this.width              = options.width;
          this.minHeight          = options.minHeight;
          this.minWidth           = options.minWidth;
          this.maxHeight          = options.maxHeight;
          this.maxWidth           = options.maxWidth;

          if( !this.model ){
            this.model = new DataONEObject({
              synced: true
           });
          }

          if (!this.url && this.model) {
            this.url = this.model.url();
          }

        }

        // Ensure the object formats are cached for uploader's use
        if ( typeof MetacatUI.objectFormats === "undefined" ) {
            MetacatUI.objectFormats = new ObjectFormats();
            MetacatUI.objectFormats.fetch();
        }

        // Bug fix: Overwrite a dropzone function that causes a bug in Edge 16 &
        // 17 browser. If we update our dropzone with a fallback, this function
        // should return the fallback element.
        Dropzone.prototype.getExistingFallback = function(){
          return false
        };

        // Identify which zones should be drag & drop manually
        Dropzone.autoDiscover = false;

      } catch (e) {
        console.log("ImageUploaderView failed to initialize. Error message: " + e);
      }


    },

    /**
    * Renders this view
    */
    render: function(){

      try{
        // Reference to the view
        var view = this,
        // The overall template which holds two sub-templates
        fullTemplate = view.template({
          height: this.height,
          width: this.width,
          uploadInstructions: this.uploadInstructions,
          imageTagName: this.imageTagName
        }),
        // The outer template
        dropzoneTemplate = $(fullTemplate).find(".dropzone")[0].outerHTML,
        // The inner template inserted when an image is added
        previewTemplate = $(fullTemplate)
                              .find(".dz-preview")[0]
                              .outerHTML;

        // Insert the main template for this view
        view.$el.html(dropzoneTemplate);

        console.log(view.model.get("imageURL"), view.model.url())

        // Add upload & drag and drop functionality to the dropzone div.
        // For config details, see: https://www.dropzonejs.com/#configuration
        var $dropZone = view.$(".dropzone").dropzone({

          url: view.model.get("imageURL") || view.model.url(),
          acceptedFiles: "image/*",
          addRemoveLinks: false,
          maxFiles: 1,
          parallelUploads: 1,
          uploadMultiple: false,
          resizeHeight: view.maxHeight,
          resizeWidth: view.maxWidth,
          thumbnailHeight: view.maxHeight < view.height ? view.maxHeight : null,
          thumbnailWidth: view.maxWidth < view.width ? view.maxWidth : null,
          dictInvalidFileType: "This file type is not allowed. Please select an image file",
          autoProcessQueue: true,
          previewTemplate: previewTemplate,
          withCredentials: true,
          paramName: "object",
          hiddenInputContainer: this.el,

          headers: {
              "Cache-Control": null,
              "X-Requested-With": null,
              "Authorization": MetacatUI.appUserModel.createAjaxSettings().headers.Authorization
          },

          // Override dropzone's function for showing images in the upload zone
          // so that we have the option to display them as a background images.
          // Check for minimum dimensions at this stage because dropzone has
          // calculated the file's height here.
          thumbnail: function(file, dataURL){
            try {
              // Don't bother size check for SVG images since they're vector
              var dimCheck = file.type === "image/svg+xml" ? true : view.checkMinDimensions(file.width, file.height);
              if(dimCheck != true){
                if(file.rejectDimensions){
                  // Send reason for rejection rejectDimensions function
                  file.rejectDimensions(dimCheck);
                }
              } else {
                if(file.acceptDimensions){
                  file.acceptDimensions();
                };
                view.showImage(file, dataURL);
              };
            } catch (e) {
              console.error("Error generating thumbnail image, error message: " + e);
            }

          },

          // Dropzone will check filetype = options.acceptedFiles. Add functions
          // for when the image is too small.
          accept: function accept(file, done) {
            try {
              file.rejectDimensions = function(message) {  done(message)  };
              file.acceptDimensions = function(){  done()  };
            } catch (e) {
              console.error("Error during dropzone's accept function. Error code: " + e);
            }
          },


          // After the file is accepted (correct filetype and min size requirements),
          // resize the image if it's too large in height or width, then
          // provide image data to a dataOne object model and calulate checksum.
          transformFile: function(file, done){
            try {
              // Only resize images if dimensions are too large.
              // Once the image is resized (or not), save the data to the model and get a checksum.
              var resizeWidth = (file.width > this.options.resizeWidth) ? this.options.resizeWidth : null;
              var resizeHeight = (file.height > this.options.resizeHeight) ? this.options.resizeHeight : null;
              if (resizeHeight || resizeWidth) {
                return this.resizeImage(file, resizeWidth, resizeHeight, this.options.resizeMethod, function(blob){
                  view.prepareD1Model(blob, file.name, file.type, done);
                });
              } else {
                return view.prepareD1Model(file, file.name, file.type, done);
              }
            } catch (e) {
              console.error("Error during dropzone's transformFile function. Error code: " + e);
            }
          },

          // Add some required formData right before the image is uploaded
          sending: function(file, xhr, formData) {
            try {
              //Create the system metadata XML & send as blob
              var sysMetaXML = view.model.serializeSysMeta();
              var xmlBlob = new Blob([sysMetaXML], {type : 'application/xml'});
              formData.append("sysmeta", xmlBlob, "sysmeta.xml");
              formData.append("pid", view.model.get("id"));
            } catch (e) {
              console.error("Error during dropzone's sending function. Error code: " + e);
            }
          },

          // If there are any errors during the entire process...
          error: function error(file, message, xhr) {
            try {
              view.trigger("error");
              // Give a readable error if it's a server error
              if(xhr){
                console.error(message);
                message = "There was an error uploading your file. Please try again later."
              }
              // Make sure image isn't showing (src for <img> and style for background images)
              $(file.previewElement).find(".image-container").attr({
                src: "",
                style: ""
              });
              // Show error using dropzone's default behaviour
              this.defaultOptions.error(file, message);
            } catch (e) {
              console.error("Problem handling error, message: " + e);
            }
          },

          init: function() {
            try {
              this.on("addedfile", function(file){
                // Make sure only the most recently added image is shown in the upload zone
                view.limitFileInput();
                // Required for parent views to use listenTo() on dropzone events
                view.trigger("addedfile");
              });
              // Hide the remove buttons and text when an image is removed
              this.on("removedfile", function(file){
                view.previewImageRemove();
                // Required for parent views to use listenTo() on dropzone events
                view.trigger("removedfile");
              });
              this.on("success", function(){
                view.trigger("successSaving", view.model);
              });
            } catch (e) {
              console.error("Issue initializing dropzone, error message: " + e);
            }
          }

        });

        // Save the dropzone element for other functions to access later
        view.imageDropzone = $dropZone[0].dropzone;

        // Fetch the image if a URL was provided and show thumbnail
        if(view.url){
          view.showSavedImage();
        }
      }
      catch(error){
        console.error("ImageUploaderView could not be rendered, error message: ", error);
      }
    },

    /**
     * prepareD1Model - Called once an image file is resized or once it's
     * determined the the image does not need to be resized. This function adds
     * data about the image added by the user to a new DataOne model, then
     * calculates the checksum. When the checksum is finished being calculated,
     * calls the callback function (i.e. dropzone's done()).
     *
     * @param  {Blob|File} object Either the Blob or File to be saved to the server
     * @param  {string} filename the name of the file
     * @param  {string} filetype the filetype
     * @param  {function} callback a function to call once the checksum is calculated.
     */
    prepareD1Model: function(object, filename, filetype, callback){

      try{

        var modelAttributes = {
          synced: true,
          type: "image",
          fileName: filename,
          mediaType: filetype,
          size: object.size,
          uploadFile: object
        }

        // Each file upload must be a new DataONE object
        this.model = new DataONEObject(modelAttributes);
        this.model.updateID();
        this.model.set("obsoletes", null);
        this.model.get("accessPolicy").makePublic();

        // Start checksum, and call the callback function when it's complete
        this.model.stopListening(this.model, "checksumCalculated");
        this.model.listenToOnce(this.model, "checksumCalculated", function(){
            callback(object);
        });
        this.model.calculateChecksum();

      } catch (exception) {
        console.log("there was a problem calculating the checksum, exception: " + exception);
      }

    },


    /**
     * limitFileInput - Ensures only the most recently added image is shown in
     * the upload zone, as we limit each zone to 1 image but dropzone is
     * designed to accept multiple files. Called whenever a file is added to a
     * dropzone element.
     */
    limitFileInput: function(){
      if (this.imageDropzone.files[1]!=null){
        this.imageDropzone.removeFile(this.imageDropzone.files[0]);
      }
    },


    /**
     * checkMinDimensions - called from dropzone's thumbnail function before the
     * image is displayed. Checks that the image meets at least the minimum
     * height and width requirements provided to view.minHeight and
     * view.minWidth.
     *
     * @param  {number} width  the image's height.
     * @param  {number} height the image's width.
     * @return {string|boolean}  returns true if the image is at least as wide as and as tall as the given height and width. Otherwise returns an error message to display to the user.
     */
    checkMinDimensions: function(width, height){

      try{
        if(width < this.minWidth && height < this.minHeight){
          return("This image is too small. Please choose an image that's at least " + this.minWidth +"px wide and " + this.minHeight + "px tall.");
        } else if (width < this.minWidth) {
          return("This image is too narrow. Please choose an image that's at least " + this.minWidth +"px wide.")
        } else if (height < this.minHeight){
          return("This image is too short. Please choose an image that's at least " + this.minHeight +"px tall.")
        } else {
          // minimum height and width are met. If too large, then image will be resized.
          return true
        }
      } catch(error){
        console.log("Error checking the min dimensions of added file. Error message:" + error);
        // Better to show an image that's too small in this case.
        return true
      }
    },

    /**
     * showImage - General function for displaying an image file in the upload zone, whether
     * just added or already uploaded. This is the function that we use to override
     * dropzone's thumbnail() function. It displays the image as the background of
     * a div if this view's imageTagName attribute is set to "div", or as an image
     * element if imageTagName is set to "img".
     * @param  {object} file    Information about the image file
     * @param  {string} dataURL A URL for the image to be displayed
     */
    showImage: function(file, dataURL){

      try{
        // Don't show files that are the wrong size or type
        if(!this.url && !file.accepted){
          return
        };

        var previewEl = $(file.previewElement).find(".image-container")[0];

        if(this.imageTagName == "img"){
          previewEl.src = dataURL;
        } else if (this.imageTagName == "div"){
          $(previewEl).css("background-image", "url(" + dataURL + ")");
        }

      } catch(error) {
        console.log(error);
        this.showError($(file.previewElement));
      }

    },

    /**
    * Display an image in the upload zone that's already saved. This gets called
    * when an image url is provided to this view.
    */
    showSavedImage: function(){

      try{

        //If there is no URL or the model hasn't been saved yet, then don't show the image
        if( !this.url || this.model.isNew() ){
          return;
        }

        // A mock image file to identify the image provided to this view
        var imageFile = {
          url: this.url
        };

        // Add it to filelist so excess images can be removed if needed
        this.imageDropzone.files[0] = imageFile;
        // Call the default addedfile event handler
        this.imageDropzone.emit("addedfile", imageFile);
        // Show the thumbnail of the file
        this.imageDropzone.emit("thumbnail", imageFile, imageFile.url);
        // Make sure that there is no progress bar, etc...
        this.imageDropzone.emit("complete", imageFile);

      }
      catch(error){
        console.log("image could not be displayed, error message: " + error);
        // When the preview image fails to render, show some explanatory text
        this.showError($(this.imageDropzone.element));

      }

    },

    /**
     * showError - Indicates to the user that the image uploader may not work
     * due to browser issues.
     * @param {jQuery} dropzoneEl - The dropzone element to show the error for.
     */
    showError: function(dropzoneEl){
      dropzoneEl.addClass("error");
      dropzoneEl.find(".dz-error-message span").text("Error previewing image");
      dropzoneEl.tooltip({
        placement: "bottom",
        trigger: "hover",
        title: "Image previews cannot be shown. Your browser may be out-of-date."
      });
    },

    /**
     * previewImageRemove - When the user hovers over the remove button,
     * indicates to the user that the button will remove the image by 1) changing
     * the upload instruction text to a message about removing the image,
     * and 2) adding a warning class to the message div.
     */
    previewImageRemove: function(e){

      try {

        if(e){
          this.$el.toggleClass("remove-preview");
        } else {
          this.$el.removeClass("remove-preview");
        }


      } catch (error) {
        console.log(error);
      }
    }

  });

  return ImageUploaderView;

});