Redactor.add("plugin", "imageinsert", {
  init: function (app) {
    this.app = app;
    this.toolbar = app.toolbar;
    this.inputImageValue = "null";
  },
  start: function () {
    var buttonData = {
      title: "Image",
      icon: "image",
      api: "plugin.imageinsert.loadQorMedia",
    };

    this.hiddenContainer = this.app.container
      .getElement()
      .nextElement()
      .find(".go-plaid-portal")
      .first();

    if (this.hiddenContainer.length == 0) {
      return;
    }

    this.toolbar.addButton("image", buttonData);
    var that = this;
    //    checking dom change and update input data
    var observe = new MutationObserver(function (mutations, observer) {
      that.selectImageInput = that.hiddenContainer.find("input[type=hidden]");
      that.inputImageValue =
        that.selectImageInput.length != 0
          ? that.selectImageInput.val()
          : "null";

      if (that.inputImageValue && that.inputImageValue != "null") {
        that.insertQorImage();
      }
    });
    observe.observe(this.hiddenContainer.get(), {
      childList: true,
      attributes: true,
    });
  },

  loadQorMedia: function () {
    this.app.selection.save();
    this.hiddenContainer.find("button").trigger("click");
  },

  insertQorImage: function () {
    this.app.selection.restore();

    var inputImageJSON = JSON.parse(this.inputImageValue);
    this.app.insertion.insertHtml(`
      <figure><img src="${inputImageJSON.Url}" data-image="${inputImageJSON.ID}" alt="${inputImageJSON.Description}"></figure>
    `);
  },
});