const registerCommands = (editor: Editor) => {
  editor.addCommand('mceApplyTextcolor', function (format, value) {
    applyFormat(editor, format, value);
  });

  editor.addCommand('mceRemoveTextcolor', function (format) {
    removeFormat(editor, format);
  });
};

const register = function (editor: Editor, clipboard: Clipboard) {
  editor.addCommand('mceTogglePlainTextPaste', function () {
    Actions.togglePlainTextPaste(editor, clipboard);
  });

  editor.addCommand('mceInsertClipboardContent', function (ui, value) {
    if (value.content) {
      clipboard.pasteHtml(value.content, value.internal);
    }

    if (value.text) {
      clipboard.pasteText(value.text);
    }
  });
};

const register = function (editor: Editor) {
  editor.addCommand('codesample', function () {
    const node = editor.selection.getNode();
    if (editor.selection.isCollapsed() || Utils.isCodeSample(node)) {
      Dialog.open(editor);
    } else {
      editor.formatter.toggle('code');
    }
  });
};

const register = function (editor: Editor) {
  editor.addCommand('mceHelp', Dialog.opener(editor));
};

 }, (func, name) => {
   editor.addCommand(name, () => {
     func();
   });
 });

 }, (func, name) => {
   editor.addCommand(name, func);
 });

const register = function (editor: Editor, pluginUrl: string, startedState: Cell<boolean>, textMatcherState: Cell<DomTextMatcher>, lastSuggestionsState: Cell<LastSuggestion>, currentLanguageState: Cell<string>) {
  editor.addCommand('mceSpellCheck', function () {
    Actions.spellcheck(editor, pluginUrl, startedState, textMatcherState, lastSuggestionsState, currentLanguageState);
  });
};

const register = (editor: Editor, oldSize: Cell<number>) => {
  editor.addCommand('mceAutoResize', () => {
    Resize.resize(editor, oldSize);
  });
};

const register = function (editor: Editor, pluginUrl: string, enabledState: Cell<boolean>) {
  editor.addCommand('mceVisualBlocks', function () {
    VisualBlocks.toggleVisualBlocks(editor, pluginUrl, enabledState);
  });
};

const render = (editor: Editor, uiComponents: RenderUiComponents, rawUiConfig: RenderUiConfig, backstage: UiFactoryBackstage, args: RenderArgs): ModeRenderInfo => {
  loadIframeSkin(editor);

  Attachment.attachSystemAfter(Element.fromDom(args.targetNode), uiComponents.mothership);
  Attachment.attachSystem(Body.body(), uiComponents.uiMothership);

  editor.on('init', () => {
    OuterContainer.setToolbar(
      uiComponents.outerContainer,
      identifyButtons(editor, rawUiConfig, {backstage}, Option.none())
    );

    OuterContainer.setMenubar(
      uiComponents.outerContainer,
      identifyMenus(editor, rawUiConfig)
    );

    OuterContainer.setSidebar(
      uiComponents.outerContainer,
      rawUiConfig.sidebar
    );

    // Force an update of the ui components disabled states if in readonly mode
    if (editor.readonly) {
      handleSwitchMode(uiComponents)({mode: 'readonly'});
    }

    setupEvents(editor);
  });

  const socket = OuterContainer.getSocket(uiComponents.outerContainer).getOrDie('Could not find expected socket element');

  editor.on('SwitchMode', handleSwitchMode(uiComponents));

  if (Settings.isReadOnly(editor)) {
    editor.setMode('readonly');
  }

  editor.addCommand('ToggleSidebar', (ui: boolean, value: string) => {
    OuterContainer.toggleSidebar(uiComponents.outerContainer, value);
    editor.fire('ToggleSidebar');
  });

  editor.addQueryValueHandler('ToggleSidebar', () => {
    return OuterContainer.whichSidebar(uiComponents.outerContainer);
  });

  const drawer = Settings.getToolbarDrawer(editor);

  const refreshDrawer = () => {
    const toolbar = OuterContainer.getToolbar(uiComponents.outerContainer);
    toolbar.each(SplitToolbar.refresh);
  };

  if (drawer === Settings.ToolbarDrawer.sliding || drawer === Settings.ToolbarDrawer.floating) {
    editor.on('ResizeContent', refreshDrawer);
  }

  return {
    iframeContainer: socket.element().dom(),
    editorContainer: uiComponents.outerContainer.element().dom(),
  };
};