/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import htmlEscape from "escape-html";
import formatMessage from "../../../format-message";
import clickCallback from "./clickCallback";

tinymce.create("tinymce.plugins.InstructureImagePlugin", {
  init: function(ed) {
    // Register commands
    ed.addCommand(
      "mceInstructureImage",
      clickCallback.bind(this, ed, document)
    );

    // Register buttons
    ed.ui.registry.addToggleButton("instructure_image", {
      title: htmlEscape(
        formatMessage({
          default: "Embed Image",
          description: "Title for RCE button to embed an image"
        })
      ),
      onAction: () => ed.execCommand("mceInstructureImage"),
      icon: "image",
      onSetup: function(buttonApi) {
        // highlight our button when an image is selected
        const toggleActive = eventApi => {
          buttonApi.setActive(
            eventApi.element.nodeName.toLowerCase() === "IMG" &&
              eventApi.element.className !== "equation_image"
          );
        };
        ed.on("NodeChange", toggleActive);
        return () => ed.off("NodeChange", toggleActive);
      }
    });
  }
});

// Register plugin
tinymce.PluginManager.add(
  "instructure_image",
  tinymce.plugins.InstructureImagePlugin
);

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import htmlEscape from "escape-html";
import formatMessage from "../../../format-message";
import clickCallback from "./clickCallback";

tinymce.create("tinymce.plugins.InstructureImagePlugin", {
  init: function(ed) {
    // Register commands
    ed.addCommand(
      "mceInstructureImage",
      clickCallback.bind(this, ed, document)
    );

    // Register buttons
    ed.ui.registry.addMenuButton("instructure_image", {
      tooltip: htmlEscape(
        formatMessage({
          default: "Images",
          description: "Title for RCE button to embed an image"
        })
      ),
      icon: "image",
      fetch: (callback) => {
        const items = [
          {
            type: 'menuitem',
            text: formatMessage('Upload Image'),
            onAction: () => ed.execCommand("mceInstructureImage"),
          },
          {
            type: 'menuitem',
            text: formatMessage('Course Images'), // This item needs to be adjusted to be user/context aware, i.e. User Images
            onAction: () => alert('A tray should open here :)')
          }
        ]
        callback(items);
      },
      onSetup: function(buttonApi) {
        // highlight our button when an image is selected
        const toggleActive = eventApi => {
          buttonApi.setActive(
            eventApi.element.nodeName.toLowerCase() === "IMG" &&
              eventApi.element.className !== "equation_image"
          );
        };
        ed.on("NodeChange", toggleActive);
        return () => ed.off("NodeChange", toggleActive);
      }
    });
  }
});

// Register plugin
tinymce.PluginManager.add(
  "instructure_image",
  tinymce.plugins.InstructureImagePlugin
);

Switch plugin to use dropdown menu