/* global ns */
/**
 * Callback for setting new parameters.
 *
 * @callback H5PEditor.newParams
 * @param {Object} field Current field details.
 * @param {Object} params New parameters.
 */

/**
 * Create a field where one can select and include another library to the form.
 *
 * @class H5PEditor.Library
 * @extends H5P.EventDispatcher
 * @param {Object} parent Parent field in editor.
 * @param {Object} field Details for current field.
 * @param {Object} params Default parameters.
 * @param {newParams} setValue Callback for setting new parameters.
 */
ns.Library = function (parent, field, params, setValue) {
  var self = this;

  H5P.EventDispatcher.call(this);
  if (params === undefined) {
    this.params = {
      params: {}
    };
    // If you do a console log here it might show that this.params is
    // something else than what we set it to. One of life's big mysteries...
    setValue(field, this.params);
  }
  else {
    this.params = params;
  }
  this.field = field;
  this.parent = parent;
  this.changes = [];
  this.optionsLoaded = false;
  this.library = parent.library + '/' + field.name;

  this.passReadies = true;
  parent.ready(function () {
    self.passReadies = false;
  });

  // Confirmation dialog for changing library
  this.confirmChangeLibrary = new H5P.ConfirmationDialog({
    headerText: H5PEditor.t('core', 'changeLibrary'),
    dialogText: H5PEditor.t('core', 'confirmChangeLibrary')
  }).appendTo(document.body);

  // Load library on confirmation
  this.confirmChangeLibrary.on('confirmed', function () {
    self.loadLibrary(self.$select.val());
  });

  // Revert to current library on cancel
  this.confirmChangeLibrary.on('canceled', function () {
    self.$select.val(self.currentLibrary);
  });

  H5P.externalDispatcher.on('datainclipboard', this.updateCopyPasteButtons.bind(this));
};

ns.Library.prototype = Object.create(H5P.EventDispatcher.prototype);
ns.Library.prototype.constructor = ns.Library;


/**
 * Update state of copy and paste buttons dependent on what is currently in
 * the clipboard
 */
ns.Library.prototype.updateCopyPasteButtons = function () {
  if (!window.localStorage || !this.libraries) {
    return;
  }

  // Check if content type is supported here
  const pasteCheck = ns.canPastePlus(H5P.getClipboard(), this.libraries);
  const canPaste = pasteCheck.canPaste;
  const canCopy = (this.currentLibrary !== undefined && this.currentLibrary !== '-');

  this.$copyButton
    .prop('disabled', !canCopy)
    .toggleClass('disabled', !canCopy);

  this.$pasteButton
    .text(ns.t('core', canCopy ? 'pasteAndReplaceButton' : 'pasteButton'))
    .attr('title', canPaste ? H5PEditor.t('core', 'pasteFromClipboard') : pasteCheck.description)
    .toggleClass('disabled', !canPaste)
    .prop('disabled', !canPaste);
};

/**
 * Append the library selector to the form.
 *
 * @alias H5PEditor.Library#appendTo
 * @param {H5P.jQuery} $wrapper
 */
ns.Library.prototype.appendTo = function ($wrapper) {
  var that = this;
  var html = '<div class="field ' + this.field.type + '">';
  const id = ns.getNextFieldId(this.field);

  if (this.field.label !== 0 && this.field.label !== undefined) {
    html += '<div class="h5p-editor-flex-wrapper">' +
        '<label class="h5peditor-label-wrapper" for="' + id + '">' +
          '<span class="h5peditor-label' +
            (this.field.optional ? '' : ' h5peditor-required') + '">' +
              this.field.label +
          '</span>' +
        '</label>' +
      '</div>';
  }

  html += ns.createDescription(this.field.description, id);

  html += '<select id="' + id + '"';
  if (this.field.description !== undefined) {
    html += ' aria-describedby="' + ns.getDescriptionId(id) + '"';
  }
  html += '>' + ns.createOption('-', 'Loading...') + '</select>';

  /**
   * For some content types with custom editors, we don't want to add the copy
   * and paste button, since it is handled by the custom editors themself.
   *
   * @return {boolean}
   */
  var enableCopyAndPaste = function () {
    var librarySelector = ns.findLibraryAncestor(that.parent);
    if (librarySelector.currentLibrary !== undefined) {

      var library = ns.libraryFromString(librarySelector.currentLibrary);

      var config = {
        'H5P.CoursePresentation': {
          major: 1,
          minor: 20
        },
        'H5P.InteractiveVideo': {
          major: 1,
          minor: 20
        },
        'H5P.DragQuestion': {
          major: 1,
          minor: 13
        }
      }[library.machineName];

      if (config === undefined) {
        return true;
      }

      return library.majorVersion > config.major ||
        (library.majorVersion == config.major && library.minorVersion >= config.minor);
    }

    return true;
  };

  if (window.localStorage && enableCopyAndPaste()) {
    html += ns.createCopyPasteButtons();
  }

  html += '<div class="libwrap"></div>';

  html += '</div>';

  this.$myField = ns.$(html).appendTo($wrapper);
  this.$select = this.$myField.children('select');
  this.$label = this.$myField.find('.h5peditor-label');
  this.$clearfix = this.$myField.children('.h5peditor-clearfix');
  this.$libraryWrapper = this.$myField.children('.libwrap');
  if (window.localStorage) {
    this.$copyButton = this.$myField.find('.h5peditor-copy-button').click(function () {
      that.validate(); // Make sure all values are up-to-date
      H5P.clipboardify(that.params);

      ns.attachToastTo(
        that.$copyButton.get(0),
        H5PEditor.t('core', 'copiedToClipboard'),
        {position: {horizontal: 'center', vertical: 'above', noOverflowX: true}}
      );
    });
    this.$pasteButton = this.$myField.find('.h5peditor-paste-button')
      .click(that.pasteContent.bind(this));
  }
  ns.LibraryListCache.getLibraries(that.field.options, that.librariesLoaded, that);
};

/**
 * Hide fields that are not required.
 */
ns.Library.prototype.hide = function () {
  this.$label.hide();
  this.$libraryWrapper.addClass('no-margin');
  this.hideLibrarySelector();
  this.hideCopyPaste();
};

/**
 * Hide library selector.
 */
ns.Library.prototype.hideLibrarySelector = function () {
  this.$myField.children('select').hide();
};

/**
 * Hide copy button and paste button.
 */
ns.Library.prototype.hideCopyPaste = function () {
  this.$myField.children('.h5peditor-copypaste-wrap').hide();
};

/**
 * Replace library content using the object in clipboard
 */
ns.Library.prototype.pasteContent = function () {
  var self = this;

  const clipboard = H5P.getClipboard();

  // Check if content type is supported here
  if (!ns.canPaste(clipboard, self.libraries)) {
    console.error('Tried to paste unsupported sub-content');
    return;
  }

  // Load library on confirmation
  ns.confirmReplace(this.params.library, this.$select.offset().top, function () {
    // Update UI
    self.$select.val(clipboard.generic.library);

    // Delete old params (to keep object ref)
    for (var prop in self.params) {
      if (self.params.hasOwnProperty(prop)) {
        delete self.params[prop];
      }
    }

    // Update params
    for (prop in clipboard.generic) {
      if (clipboard.generic.hasOwnProperty(prop)) {
        self.params[prop] = clipboard.generic[prop];
      }
    }

    // Load form
    self.loadLibrary(clipboard.generic.library, true);
  });
};

/**
 * Confirm replace if there is content selected
 *
 * @param {function} next
 */
ns.Library.prototype.confirmReplace = function (next) {
  if (this.params.library) {
    // Confirm changing library
    var confirmReplace = new H5P.ConfirmationDialog({
      headerText: H5PEditor.t('core', 'changeLibrary'),
      dialogText: H5PEditor.t('core', 'confirmChangeLibrary')
    }).appendTo(document.body);
    confirmReplace.on('confirmed', next);
    confirmReplace.show(this.$select.offset().top);
  }
  else {
    // No need to confirm
    next();
  }
};

/**
 * Handler for when the library list has been loaded
 *
 * @alias H5PEditor.Library#librariesLoaded
 * @param {Array} libList
 */
ns.Library.prototype.librariesLoaded = function (libList) {
  var self = this;
  this.libraries = libList;

  var options = ns.createOption('-', '-');
  for (var i = 0; i < self.libraries.length; i++) {
    var library = self.libraries[i];
    if (library.uberName === self.params.library ||
        (library.title !== undefined && (library.restricted === undefined || !library.restricted))) {
      options += ns.createOption(library.uberName, library.title, library.uberName === self.params.library);
    }
  }

  self.$select.html(options).change(function () {
    // Use timeout to avoid bug in Chrome >44, when confirm is used inside change event.
    // Ref. https://code.google.com/p/chromium/issues/detail?id=525629
    setTimeout(function () {
      // Check if library is selected
      if (self.params.library) {
        // Confirm changing library
        self.confirmChangeLibrary.show(self.$select.offset().top);
      }
      else {
        // Load new library
        self.loadLibrary(self.$select.val());
      }
    }, 0);
  });

  if (self.libraries.length === 1) {
    self.$select.hide();
    self.$myField.children('.h5p-editor-flex-wrapper').hide();
    self.$clearfix.hide();
    self.loadLibrary(self.$select.children(':last').val(), true);
  }

  self.updateCopyPasteButtons();

  if (self.runChangeCallback === true) {
    // In case a library has been selected programmatically trigger change events, e.g. a default library.
    self.change();
    self.runChangeCallback = false;
  }
  // Load default library.
  if (this.params.library !== undefined) {
    self.loadLibrary(this.params.library, true);
  }
};

/**
 * Load the selected library.
 *
 * @alias H5PEditor.Library#loadLibrary
 * @param {string} libraryName On the form machineName.majorVersion.minorVersion
 * @param {boolean} [preserveParams]
 */
ns.Library.prototype.loadLibrary = function (libraryName, preserveParams) {
  var that = this;

  this.removeChildren();

  if (libraryName === '-') {
    delete this.params.library;
    delete this.params.params;
    delete this.params.subContentId;
    delete this.params.metadata;

    this.$libraryWrapper.attr('class', 'libwrap');
    this.updateCopyPasteButtons();
    this.change();
    return;
  }

  this.$libraryWrapper.html(ns.t('core', 'loading')).attr('class', 'libwrap ' + libraryName.split(' ')[0].toLowerCase().replace('.', '-') + '-editor' + (this.libraries.length === 1 ? ' no-margin' : ''));

  ns.loadLibrary(libraryName, function (semantics) {
    // Locate selected library object
    const library = that.findLibrary(libraryName);
    if (library === undefined) {
      that.loadLibrary('-');
      that.$libraryWrapper.html(ns.createError(ns.t('core', 'unknownLibrary', {'%lib': libraryName}))).attr('class', 'libwrap errors ' + libraryName.split(' ')[0].toLowerCase().replace('.', '-') + '-editor' + (that.libraries.length === 1 ? ' no-margin' : ''));
      return;
    }

    that.currentLibrary = libraryName;
    that.params.library = libraryName;

    if (preserveParams === undefined || !preserveParams) {
      // Reset params
      delete that.params.subContentId;
      that.params.params = {};
      that.params.metadata = {};
    }
    if (that.params.subContentId === undefined) {
      that.params.subContentId = H5P.createUUID();
    }
    if (that.params.metadata === undefined) {
      that.params.metadata = {};
    }

    // Reset wrapper content
    that.$libraryWrapper.html('');

    // Locate form
    const ancestor = ns.findAncestor(that.parent);

    // Update the main language switcher
    ancestor.addLanguages(library.uberName, ns.libraryCache[library.uberName].languages);

    // Store selected Content Type title in metadata for Copyright usage
    that.params.metadata.contentType = library.title;

    // Add metadata form for subcontent
    const metadataSettings = that.getLibraryMetadataSettings(library);
    if (!metadataSettings.disable) {
      that.metadataForm = new ns.MetadataForm(that, that.params.metadata, that.$libraryWrapper, !metadataSettings.disableExtraTitleField, true);
    }
    else {
      that.metadataForm = null; // Prevent usage of last selected content's metadata form
    }

    ns.processSemanticsChunk(semantics, that.params.params, that.$libraryWrapper, that);
    that.updateCopyPasteButtons();

    if (that.metadataForm && metadataSettings.disableExtraTitleField) {
      // Find another location for the metadata button
      for (let i = 0; i < that.children.length; i++) {
        if (that.children[i].$item) {
          // Use the first field with a valid $item
          that.metadataForm.appendButtonTo(that.children[i].$item);
          break;
        }
      }
    }

    if (that.libraries !== undefined) {
      that.change();
    }
    else {
      that.runChangeCallback = true;
    }
  });
};

/**
 * Locate the Library object for the given library name.
 *
 * @param {String} libraryName
 * @return {Object}
 */
ns.Library.prototype.findLibrary = function (libraryName) {
  const self = this;

  for (let i = 0; i < self.libraries.length; i++) {
    if (self.libraries[i].uberName === libraryName)  {
      return self.libraries[i];
    }
  }
};


/**
 * Locate the Library Metadata Settings object for the given library.
 *
 * @param {String} libraryName
 * @return {Object}
 */
ns.Library.prototype.getLibraryMetadataSettings = function (library) {
  return library.metadataSettings ? library.metadataSettings : {
    disable: !ns.enableMetadata(library.uberName),
    disableExtraTitleField: false
  };
};

/**
 * Add the given callback or run it.
 *
 * @alias H5PEditor.Library#change
 * @param {Function} callback
 */
ns.Library.prototype.change = function (callback) {
  if (callback !== undefined) {
    // Add callback
    this.changes.push(callback);
  }
  else {
    // Find library
    var library, i;
    for (i = 0; i < this.libraries.length; i++) {
      if (this.libraries[i].uberName === this.params.library) {
        library = this.libraries[i];
        break;
      }
    }

    // Run callbacks
    for (i = 0; i < this.changes.length; i++) {
      this.changes[i](library);
    }
  }
};

/**
 * Validate this field and its children.
 *
 * @alias H5PEditor.Library#validate
 * @returns {boolean}
 */
ns.Library.prototype.validate = function () {
  var valid = true;

  if (this.metadataForm && this.metadataForm.children) {
    for (var i = 0; i < this.metadataForm.children.length; i++) {
      if (this.metadataForm.children[i].validate() === false) {
        valid = false;
      }
    }
  }

  if (this.children) {
    for (var i = 0; i < this.children.length; i++) {
      if (this.children[i].validate() === false) {
        valid = false;
      }
    }
  }
  else if (this.libraries && this.libraries.length) {
    valid = false;
  }

  return (this.field.optional ? true : valid);
};

/**
 * Collect functions to execute once the tree is complete.
 *
 * @alias H5PEditor.Library#ready
 * @param {Function} ready
 */
ns.Library.prototype.ready = function (ready) {
  if (this.passReadies) {
    this.parent.ready(ready);
  }
  else {
    this.readies.push(ready);
  }
};

/**
 * Custom remove children that supports common fields.
 *
 * * @alias H5PEditor.Library#removeChildren
 */
ns.Library.prototype.removeChildren = function () {
  if (this.metadataForm && this.metadataForm.children !== undefined) {
    ns.removeChildren(this.metadataForm.children);
  }

  if (this.currentLibrary === '-' || this.children === undefined) {
    return;
  }

  // Remove old metadata form and button
  if (this.$metadataFormWrapper) {
    this.$metadataFormWrapper.remove();
    delete this.$metadataFormWrapper;
    this.$metadataButton.remove();
    delete this.$metadataButton;
  }

  var ancestor = ns.findAncestor(this.parent);
  for (var library in ancestor.commonFields) {
    if (library === this.currentLibrary) {
      var remove = false;

      for (var fieldName in ancestor.commonFields[library]) {
        var field = ancestor.commonFields[library][fieldName];
        if (field.parents.length === 1) {
          field.instance.remove();
          remove = true;
        }

        for (var i = 0; i < field.parents.length; i++) {
          if (field.parents[i] === this) {
            field.parents.splice(i, 1);
            field.setValues.splice(i, 1);
          }
        }
      }

      if (remove) {
        delete ancestor.commonFields[library];
        ns.$(ns.renderableCommonFields[library].wrapper).remove();
      }
    }
  }

  // Locate selected library object
  const lib = this.findLibrary(this.currentLibrary);

  // Update the main language switcher
  ancestor.removeLanguages(lib.uberName, ns.libraryCache[lib.uberName].languages);

  ns.removeChildren(this.children);
};

/**
 * Allows ancestors and widgets to do stuff with our children.
 *
 * @alias H5PEditor.Library#forEachChild
 * @param {Function} task
 */
ns.Library.prototype.forEachChild = function (task) {
  for (var i = 0; i < this.children.length; i++) {
    if (task(this.children[i], i)) {
      return;
    }
  }
};

/**
 * Called when this item is being removed.
 *
 * @alias H5PEditor.Library#remove
 */
ns.Library.prototype.remove = function () {
  this.removeChildren();
  if (this.$select !== undefined) {
    this.$select.parent().remove();
  }
};

// Tell the editor what widget we are.
ns.widgets.library = ns.Library;