(function ($) {
  CKEDITOR.plugins.add("codesnippet", {
    requires: "widget,dialog,contextmenu",
    icons: "codesnippet",

    onLoad: function () {
      CKEDITOR.dialog.add("codeSnippet", this.path + "dialogs/codesnippet.js");
    },

    init: function (editor) {
      editor.ui.addButton &&
        editor.ui.addButton("codesnippet", {
          label: "Codesnippet",
          command: "codeSnippet",
          toolbar: "insert,99",
          group: "44",
          icon: this.path + "icons/codesnippet.png",
        });

      editor.addCommand("removewidget", createDef({
        exec: function (editor) {
          if (editor.widgets.focused) {
            let element = editor.widgets.focused;
            let range = editor.createRange();
				    range.moveToPosition( element.element, CKEDITOR.POSITION_BEFORE_START );
            range.select();
            element.destroy();
            element.element.remove();
          }
        },
      }));

      editor.addMenuGroup("codesnippet");
      editor.addMenuItems({
        myCommand: {
          label: "Delete Snippet",
          command: "removewidget",
          group: "codesnippet",
          order: 1
        },
      });

      if (editor.contextMenu)
        editor.contextMenu.addListener(() => {return { myCommand: CKEDITOR.TRISTATE_OFF } });
    },

    afterInit: function (editor) {
      registerWidget(editor, this.path);
    },
  });

  function createDef( def ) {
    return CKEDITOR.tools.extend( def || {}, {
      contextSensitive: 1,
      refresh: function( editor, path ) {
        this.setState((editor.widgets.focused) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED);
      }
    });
  }

  function registerWidget(editor, path) {
    var codeClass = editor.config.codeSnippet_codeClass;

    editor.config.shiftEnterMode = CKEDITOR.ENTER_P;
    editor.settings = CKEDITOR.tools.extend(
      {
        cls: "",
        modes: [
          //[View for pre, type for aceEditor, type for highlightjs] 
          ["ObjectScript", "text", "cls"],
	  ["SQL", "sql", "sql"],
          ["Python", "python", "python"],
          ["JSON", "json", "json"],
          ["YAML", "yaml", "yaml"],
          ["JavaScript", "javascript", "javascript"],
          ["Dockerfile", "dockerfile", "dockerfile"],
          ["HTML", "html", "html"],
          ["CSS", "css", "css"],
          ["Java", "java", "java"],
          ["XML", "xml", "xml"],
          ["Bash", "bash", "bash"],
          ["Shell Session", "shell", "shell"],
	  ["PHP", "php", "php"],
        ],
        tab_size: 4,
        js: "//cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/",
      },
      editor.config.codeSnippet,
      true
    );

    CKEDITOR.scriptLoader.load([
      (editor.settings.js + "ace.js"),
      "/sites/all/libraries/highlightjs/highlight.pack.min.js",
    ]);

    editor.addContentsCss(`/sites/all/libraries/highlightjs/styles/${editor.config.codeSnippet_theme}.css`);
    editor.addContentsCss(path + "dialogs/style.css");

    editor.on(
      "instanceReady",
      function () {
        CKEDITOR.document.appendStyleSheet(path + "dialogs/style.css");
        CKEDITOR.scriptLoader.load([(editor.settings.js + "ext-whitespace.js")]);
      }.bind(this)
    );

    editor.widgets.add("codeSnippet", {
      allowedContent: "pre; code(language-*); p;",
      requiredContent: "pre",
      styleableElements: "pre",
      template: `<pre class='codeblock-container'><code class=${codeClass}></code></pre>`,
      dialog: "codeSnippet",
      pathName: "codesnippet",
      mask: true,

      parts: {
        pre: "pre",
        code: "code"
      },

      upcast: function (element, data) {
        if(element.hasClass("codeblock-container")) data.lang = element.attributes.idlang;
        data.tabsize = (element.attributes.tabsize) ? element.attributes.tabsize : 4;
        return element.hasClass("codeblock-container");
      },

      data: function () {
        var data = this.data;

        if(data.code === undefined) data.code = this.parts.code.getText();

        if (data.lang !== undefined) {
          this.parts.code.setHtml(CKEDITOR.tools.htmlEncode(data.code));
          this.parts.code.$.className = `language-${editor.settings.modes[data.lang][2]} ${editor.config.codeSnippet_codeClass}`;
          hljs.highlightBlock(this.parts.code.$, editor.settings.modes[data.lang][2]);
        }
      },
    });
  }
})(jQuery);

CKEDITOR.config.codeSnippet_codeClass = "hljs";
CKEDITOR.config.codeSnippet_theme = "idea";