/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/

(function ($, _, Drupal) {
  Drupal.quickedit.editors.image = Drupal.quickedit.EditorView.extend({
    initialize(options) {
      Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
      this.model.set('originalValue', this.$el.html().trim());
      this.model.set('currentValue', function (index, value) {
        const matches = $(this).attr('name').match(/(alt|title)]$/);

        if (matches) {
          const name = matches[1];
          const $toolgroup = $(`#${options.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
          const $input = $toolgroup.find(`.quickedit-image-field-info input[name="${name}"]`);

          if ($input.length) {
            return $input[0].value;
          }
        }
      });
    },

    stateChange(fieldModel, state, options) {
      const from = fieldModel.previous('state');

      switch (state) {
        case 'inactive':
          break;

        case 'candidate':
          if (from !== 'inactive') {
            this.$el.find('.quickedit-image-dropzone').remove();
            this.$el.removeClass('quickedit-image-element');
          }

          if (from === 'invalid') {
            this.removeValidationErrors();
          }

          break;

        case 'highlighted':
          break;

        case 'activating':
          _.defer(() => {
            fieldModel.set('state', 'active');
          });

          break;

        case 'active':
          {
            const self = this;
            this.$el.addClass('quickedit-image-element');
            const $dropzone = this.renderDropzone('upload', Drupal.t('Drop file here or click to upload'));
            $dropzone.on('dragenter', function (e) {
              $(this).addClass('hover');
            });
            $dropzone.on('dragleave', function (e) {
              $(this).removeClass('hover');
            });
            $dropzone.on('drop', function (e) {
              if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
                $(this).removeClass('hover');
                self.uploadImage(e.originalEvent.dataTransfer.files[0]);
              }
            });
            $dropzone.on('click', e => {
              $('<input type="file">').trigger('click').on('change', function () {
                if (this.files.length) {
                  self.uploadImage(this.files[0]);
                }
              });
            });
            $dropzone.on('dragover dragenter dragleave drop click', e => {
              e.preventDefault();
              e.stopPropagation();
            });
            this.renderToolbar(fieldModel);
            break;
          }

        case 'changed':
          break;

        case 'saving':
          if (from === 'invalid') {
            this.removeValidationErrors();
          }

          this.save(options);
          break;

        case 'saved':
          break;

        case 'invalid':
          this.showValidationErrors();
          break;
      }
    },

    uploadImage(file) {
      this.renderDropzone('upload loading', Drupal.t('Uploading <i>@file</i>…', {
        '@file': file.name
      }));
      const fieldID = this.fieldModel.get('fieldID');
      const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/upload/!entity_type/!id/!field_name/!langcode/!view_mode'));
      const data = new FormData();
      data.append('files[image]', file);
      const self = this;
      this.ajax({
        type: 'POST',
        url,
        data,

        success(response) {
          const $el = $(self.fieldModel.get('el'));
          self.fieldModel.set('state', 'changed');
          self.fieldModel.get('entity').set('inTempStore', true);
          self.removeValidationErrors();
          const $content = $(response.html).closest('[data-quickedit-field-id]').children();
          $el.empty().append($content);
        }

      });
    },

    ajax(options) {
      const defaultOptions = {
        context: this,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,

        error() {
          this.renderDropzone('error', Drupal.t('A server error has occurred.'));
        }

      };
      const ajaxOptions = $.extend(defaultOptions, options);
      const successCallback = ajaxOptions.success;

      ajaxOptions.success = function (response) {
        if (response.main_error) {
          this.renderDropzone('error', response.main_error);

          if (response.errors.length) {
            this.model.set('validationErrors', response.errors);
          }

          this.showValidationErrors();
        } else {
          successCallback(response);
        }
      };

      $.ajax(ajaxOptions);
    },

    renderToolbar(fieldModel) {
      const $toolgroup = $(`#${fieldModel.toolbarView.getMainWysiwygToolgroupId()}`);
      let $toolbar = $toolgroup.find('.quickedit-image-field-info');

      if ($toolbar.length === 0) {
        const fieldID = fieldModel.get('fieldID');
        const url = Drupal.quickedit.util.buildUrl(fieldID, Drupal.url('quickedit/image/info/!entity_type/!id/!field_name/!langcode/!view_mode'));
        const self = this;
        self.ajax({
          type: 'GET',
          url,

          success(response) {
            $toolbar = $(Drupal.theme.quickeditImageToolbar(response));
            $toolgroup.append($toolbar);
            $toolbar.on('keyup paste', () => {
              fieldModel.set('state', 'changed');
            });
            fieldModel.get('entity').toolbarView.position();
          }

        });
      }
    },

    renderDropzone(state, text) {
      let $dropzone = this.$el.find('.quickedit-image-dropzone');

      if ($dropzone.length) {
        $dropzone.removeClass('upload error hover loading').addClass(`.quickedit-image-dropzone ${state}`).children('.quickedit-image-text').html(text);
      } else {
        $dropzone = $(Drupal.theme('quickeditImageDropzone', {
          state,
          text
        }));
        this.$el.append($dropzone);
      }

      return $dropzone;
    },

    revert() {
      this.$el.html(this.model.get('originalValue'));
    },

    getQuickEditUISettings() {
      return {
        padding: false,
        unifiedToolbar: true,
        fullWidthToolbar: true,
        popup: false
      };
    },

    showValidationErrors() {
      const errors = Drupal.theme('quickeditImageErrors', {
        errors: this.model.get('validationErrors')
      });
      $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`).append(errors);
      this.getEditedElement().addClass('quickedit-validation-error');
      this.fieldModel.get('entity').toolbarView.position();
    },

    removeValidationErrors() {
      $(`#${this.fieldModel.toolbarView.getMainWysiwygToolgroupId()}`).find('.quickedit-image-errors').remove();
      this.getEditedElement().removeClass('quickedit-validation-error');
    }

  });
})(jQuery, _, Drupal);