App.ImageUploadComponent = Ember.Component.extend({
  asset: null,
  layoutName: 'components/image-upload',
  myDropzone: null,

  widthRequirement: function() {
    if (this.get('imageWidth')) {
      return this.get('imageWidth');
    } else {
      return null;
    }
  }.property('imageWidth'),

  heightRequirement: function() {
    if (this.get('imageHeight')) {
      return this.get('imageHeight');
    } else {
      return null;
    }
  }.property('imageHeight'),

  dimensionsRequirements: function() {
    if (this.get('imageWidth') && this.get('imageHeight')) {
      return "Required Dimensions (" + this.get('imageWidth') + "x" + this.get('imageHeight') + "px)";
    } else if (this.get('imageWidth')) {
      return "Required Width (" + this.get('imageWidth') + "px)";
    } else if (this.get('imageHeight')) {
      return "Required Height (" + this.get('imageHeight') + "px)";
    } else {
      return null;
    }
  }.property('imageWidth', 'imageHeight'),

  updateAssetModel: function(response) {
    if (response && response.url) {
      this.set('asset.url', response.url);
      this.set('asset.fileName', response.fileName);
      this.set('asset.s3Bucket', response.s3Bucket);
      this.set('asset.s3FileKey', response.s3FileKey);
    }
  },

  blankAssetModel: function() {
    this.set('asset', App.Asset.load(App.Asset.getBlankGraphicAsset()));
  },

  initDropzone: function() {
    var emberComponent = this;

    var dropZonesSelector = ".my-graphic-dropzone";
    var myDropzones = this.$(dropZonesSelector);

    var imagePreviewTemplate = this.$(".my-image-dropzone-template")[0].innerHTML;

    var imageWidth = emberComponent.get('widthRequirement');
    var imageHeight = emberComponent.get('heightRequirement');

    myDropzones.each(function() {
      var dz = $(this);

      if (!dz.attr('data-dropzone')) {
        dz.dropzone({
          url: App.SETTINGS.apiHost + "/assets/uploadgraphic",
          headers: {'Auth-Token': App.SETTINGS.getAuthToken()},
          maxFiles: 1,
          acceptedFiles: '.png,.jpg,.jpeg',
          dictInvalidFileType: 'Only .png and .jpg files are accepted.',
          imageWidth: imageWidth,
          imageHeight: imageHeight,
          addRemoveLinks: true,
          previewTemplate: imagePreviewTemplate,
          dictDefaultMessage: "Upload Image",
          dictCancelUpload: "Remove Image",
          emberComponent: emberComponent,
          complete: function(file, done) {
            // update our asset in Ember
            emberComponent.updateAssetModel(done);

            // the normal dropzone code - DO NOT EDIT
            if (file._removeLink) {
              return file._removeLink.textContent = this.options.dictRemoveFile;
            }
          },
          removedfile: function(file) {
            // remove from Ember
            emberComponent.blankAssetModel();

            // the normal dropzone code - DO NOT EDIT
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
          }
        });

        dz.attr('data-dropzone', '1');
        emberComponent.set('myDropzone', dz);
      }
    });
  },

  didInsertElement: function() {
    console.log('ImageUploadComponent.didInsertElement');

    Ember.run.scheduleOnce('afterRender', this, function() {
      // perform jQuery function here;
      console.log('ImageUploadComponent.didInsertElement.afterRender');

      this.initDropzone();
    });
  }
});