const makeTab = function () {
  const makeAriaLabel = function (shortcut) {
    return 'aria-label="Action: ' + shortcut.action + ', Shortcut: ' + shortcut.shortcut.replace(/Ctrl/g, 'Control') + '"';
  };
  const shortcutLisString = Arr.map(KeyboardShortcuts.shortcuts, function (shortcut) {
    return '<tr data-mce-tabstop="1" tabindex="-1" ' + makeAriaLabel(shortcut) + '>' +
              '<td>' + I18n.translate(shortcut.action) + '</td>' +
              '<td>' + shortcut.shortcut + '</td>' +
            '</tr>';
  }).join('');

  return {
    title: 'Handy Shortcuts',
    type: 'container',
    style: 'overflow-y: auto; overflow-x: hidden; max-height: 250px',
    items: [
      {
        type: 'container',
        html: '<div>' +
                '<table class="mce-table-striped">' +
                  '<thead>' +
                    '<th>' + I18n.translate('Action') + '</th>' +
                    '<th>' + I18n.translate('Shortcut') + '</th>' +
                  '</thead>' +
                  shortcutLisString +
                '</table>' +
              '</div>'
      }
    ]
  };
};

const pluginLister = function (editor) {
  const pluginKeys = getPluginKeys(editor);
  const pluginLis = Arr.map(pluginKeys, function (key) {
    return '<li>' + maybeUrlize(editor, key) + '</li>';
  });
  const count = pluginLis.length;
  const pluginsString = pluginLis.join('');

  return '<p><b>' + I18n.translate(['Plugins installed ({0}):', count ]) + '</b></p>' +
          '<ul>' + pluginsString + '</ul>';
};

  const getColorCellHtml = function (color, title) {
    const isNoColor = color === 'transparent';

    return (
      '<td class="mce-grid-cell' + (isNoColor ? ' mce-colorbtn-trans' : '') + '">' +
      '<div id="' + id + '-' + (count++) + '"' +
      ' data-mce-color="' + (color ? color : '') + '"' +
      ' role="option"' +
      ' tabIndex="-1"' +
      ' style="' + (color ? 'background-color: ' + color : '') + '"' +
      ' title="' + I18n.translate(title) + '">' +
      (isNoColor ? '&#215;' : '') +
      '</div>' +
      '</td>'
    );
  };

const generateTocContentHtml = function (editor) {
  let html = '';
  const headers = readHeaders(editor);
  let prevLevel = getMinLevel(headers) - 1;
  let i, ii, h, nextLevel;

  if (!headers.length) {
    return '';
  }

  html += generateTitle(Settings.getTocHeader(editor), I18n.translate('Table of Contents'));

  for (i = 0; i < headers.length; i++) {
    h = headers[i];
    h.element.id = h.id;
    nextLevel = headers[i + 1] && headers[i + 1].level;

    if (prevLevel === h.level) {
      html += '<li>';
    } else {
      for (ii = prevLevel; ii < h.level; ii++) {
        html += '<ul><li>';
      }
    }

    html += '<a href="#' + h.id + '">' + h.title + '</a>';

    if (nextLevel === h.level || !nextLevel) {
      html += '</li>';

      if (!nextLevel) {
        html += '</ul>';
      }
    } else {
      for (ii = h.level; ii > nextLevel; ii--) {
        html += '</li></ul><li>';
      }
    }

    prevLevel = h.level;
  }

  return html;
};

const makeRow = function () {
  const version = getVersion(EditorManager.majorVersion, EditorManager.minorVersion);
  const changeLogLink = '<a href="https://www.tinymce.com/docs/changelog/?utm_campaign=editor_referral&utm_medium=help_dialog&utm_source=tinymce" target="_blank">TinyMCE ' + version + '</a>';

  return [
    {
      type: 'label',
      html: I18n.translate(['You are using {0}', changeLogLink])
    },
    {
      type: 'spacer',
      flex: 1
    },
    {
      text: 'Close',
      onclick () {
        this.parent().parent().close();
      }
    }
  ];
};

const render = function (editor, theme, args) {
  let panel, resizeHandleCtrl, startSize;

  if (Settings.isSkinDisabled(editor) === false && args.skinUiCss) {
    DOM.styleSheetLoader.load(args.skinUiCss, SkinLoaded.fireSkinLoaded(editor));
  } else {
    SkinLoaded.fireSkinLoaded(editor)();
  }

  panel = theme.panel = Factory.create({
    type: 'panel',
    role: 'application',
    classes: 'tinymce',
    style: 'visibility: hidden',
    layout: 'stack',
    border: 1,
    items: [
      {
        type: 'container',
        classes: 'top-part',
        items: [
          Settings.hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) },
          Toolbar.createToolbars(editor, Settings.getToolbarSize(editor))
        ]
      },
      Sidebar.hasSidebar(editor) ? editAreaContainer(editor) : editArea('1 0 0 0')
    ]
  });

  if (Settings.getResize(editor) !== 'none') {
    resizeHandleCtrl = {
      type: 'resizehandle',
      direction: Settings.getResize(editor),

      onResizeStart () {
        const elm = editor.getContentAreaContainer().firstChild;

        startSize = {
          width: elm.clientWidth,
          height: elm.clientHeight
        };
      },

      onResize (e) {
        if (Settings.getResize(editor) === 'both') {
          Resize.resizeTo(editor, startSize.width + e.deltaX, startSize.height + e.deltaY);
        } else {
          Resize.resizeTo(editor, null, startSize.height + e.deltaY);
        }
      }
    };
  }

  if (Settings.hasStatusbar(editor)) {
    const linkHtml = '<a href="https://www.tinymce.com/?utm_campaign=editor_referral&utm_medium=poweredby&utm_source=tinymce" rel="noopener" target="_blank" role="presentation" tabindex="-1">tinymce</a>';
    const html = I18n.translate(['Powered by {0}', linkHtml]);
    const brandingLabel = Settings.isBrandingEnabled(editor) ? { type: 'label', classes: 'branding', html: ' ' + html } : null;

    panel.add({
      type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [
        { type: 'elementpath', editor },
        resizeHandleCtrl,
        brandingLabel
      ]
    });
  }

  Events.fireBeforeRenderUI(editor);
  editor.on('SwitchMode', switchMode(panel));
  panel.renderBefore(args.targetNode).reflow();

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

  if (args.width) {
    DOM.setStyle(panel.getEl(), 'width', args.width);
  }

  // Remove the panel when the editor is removed
  editor.on('remove', function () {
    panel.remove();
    panel = null;
  });

  // Add accesibility shortcuts
  A11y.addKeys(editor, panel);
  ContextToolbars.addContextualToolbars(editor);

  return {
    iframeContainer: panel.find('#iframe')[0].getEl(),
    editorContainer: panel.getEl()
  };
};

 const wordsToText = function (editor) {
   return I18n.translate(['{0} words', WordCount.getCount(editor)]);
 };