export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
  const numRows = 10;
  const numColumns = 10;
  const sizeLabelId = Id.generate('size-label');
  const cells = makeCells(sizeLabelId, numRows, numColumns);

  const memLabel = Memento.record({
    dom: {
      tag: 'span',
      classes: ['tox-insert-table-picker__label'],
      attributes: {
        id: sizeLabelId
      }
    },
    components: [GuiFactory.text('0x0')],
    behaviours: Behaviour.derive([
      Replacing.config({})
    ])
  });

  return {
    type: 'widget',
    data: { value: Id.generate('widget-id')},
    dom: {
      tag: 'div',
      classes: ['tox-fancymenuitem'],
    },
    autofocus: true,
    components: [ItemWidget.parts().widget({
      dom: {
        tag: 'div',
        classes: ['tox-insert-table-picker']
      },
      components: makeComponents(cells).concat(memLabel.asSpec()),
      behaviours: Behaviour.derive([
        AddEventsBehaviour.config('insert-table-picker', [
          AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
            const row = e.event().row();
            const col = e.event().col();
            selectCells(cells, row, col, numRows, numColumns);
            Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
          }),
          AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
            spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
            AlloyTriggers.emit(c, SystemEvents.sandboxClose());
          })
        ]),
        Keying.config({
          initSize: {
            numRows,
            numColumns
          },
          mode: 'flatgrid',
          selector: '[role="button"]'
        })
      ])
    })]
  };
}

UnitTest.asynctest('Editor alignment toolbar buttons test', (success, failure) => {
  Theme();

  Pipeline.async({}, [
    Log.chainsAsStep('TBA', 'Testing toolbar: toolbar alignment buttons', [
      NamedChain.asChain([
        NamedChain.writeValue('body', Body.body()),
        NamedChain.write('editor', McEditor.cFromSettings({
          toolbar: 'alignleft aligncenter alignright alignjustify alignnone',
          theme: 'silver',
          base_url: '/project/tinymce/js/tinymce'
        })),
        NamedChain.direct('body', UiFinder.cWaitForVisible('Waiting for menubar', '.tox-menubar'), '_menubar'),
        NamedChain.direct('body', cExtractOnlyOne('.tox-toolbar'), 'toolbar'),
        NamedChain.direct('toolbar', Assertions.cAssertStructure(
          'Checking toolbar should have just alignment buttons',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [ arr.has('tox-toolbar') ],
              children: [
                s.element('div', {
                  classes: [ arr.has('tox-toolbar__group') ],
                  children: [
                    s.element('button', {
                      attrs: { title: str.is('Align left')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align center')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Align right')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('Justify')}
                    }),
                    s.element('button', {
                      attrs: { title: str.is('No alignment')}
                    }),
                  ]
                })
              ]
            });
          })
        ), Id.generate('')),
        NamedChain.direct('editor', McEditor.cRemove, Id.generate('')),
        NamedChain.bundle(Result.value)
      ])
    ])
  ], success, failure);
});

 }).map((items) => {
   return Option.from(createTieredDataFrom(
     Merger.deepMerge(
       createPartialChoiceMenu(
         Id.generate('menu-value'),
         items,
         (value) => {
           spec.onItemAction(getApi(comp), value);
         },
         spec.columns,
         spec.presets,
         ItemResponse.CLOSE_ON_EXECUTE,
         spec.select.getOr(() => false),
         providersBackstage
       ),
       {
         movement: deriveMenuMovement(spec.columns, spec.presets),
         menuBehaviours: SimpleBehaviours.unnamedEvents(spec.columns !== 'auto' ? [ ] : [
           AlloyEvents.runOnAttached((comp, se) => {
             detectSize(comp, 4, classForPreset(spec.presets)).each(({ numRows, numColumns }) => {
               Keying.setGridSize(comp, numRows, numColumns);
             });
           })
         ])
       } as TieredMenuTypes.PartialMenuSpec
     )
   ));
 });

 const makeItem = (text: string): Menu.MenuItemApi => {
   return {
     type: 'menuitem',
     value: Id.generate('item'),
     text,
     onAction: () => console.log('clicked: ' + text)
   };
 };

const renderContextForm = (ctx: Toolbar.ContextForm, backstage: UiFactoryBackstage) => {
  // Cannot use the FormField.sketch, because the DOM structure doesn't have a wrapping group
  const inputAttributes = ctx.label.fold(
    () => ({ }),
    (label) => ({ 'aria-label': label })
  );

  const memInput = Memento.record(
    Input.sketch({
      inputClasses: [ 'tox-toolbar-textfield', 'tox-toolbar-nav-js' ],
      data: ctx.initValue(),
      inputAttributes,
      selectOnFocus: true,
      inputBehaviours: Behaviour.derive([
        Keying.config({
          mode: 'special',
          onEnter: (input) => {
            return commands.findPrimary(input).map((primary) => {
              AlloyTriggers.emitExecute(primary);
              return true;
            });
          },
          // These two lines need to be tested. They are about left and right bypassing
          // any keyboard handling, and allowing left and right to be processed by the input
          // Maybe this should go in an alloy sketch for Input?
          onLeft: (comp, se) => {
            se.cut();
            return Option.none();
          },
          onRight: (comp, se) => {
            se.cut();
            return Option.none();
          }
        })
      ])
    })
  );

  const commands = generate(memInput, ctx.commands, backstage.shared.providers);

  return renderToolbar({
    uid: Id.generate('context-toolbar'),
    initGroups: [
      {
        title: Option.none(),
        items: [ memInput.asSpec() ]
      },
      {
        title: Option.none(),
        items: commands.asSpecs() as AlloySpec[]
      }
    ],
    onEscape: Option.none,
    cyclicKeying: true,
    backstage,
    getSink: () => Result.error('')
  });
};

const insertBlob = function (editor: Editor, base64: string, blob: Blob) {
  let blobCache, blobInfo;

  blobCache = editor.editorUpload.blobCache;
  blobInfo = blobCache.create(Id.generate('mceu'), blob, base64);
  blobCache.add(blobInfo);

  editor.insertContent(editor.dom.createHTML('img', { src: blobInfo.blobUri() }));
};

 const enrichCustom = function (item) {
   const formatName = Id.generate(item.title);
   const newItem = Merger.deepMerge(item, {
     format: formatName,
     isSelected: isSelectedFor(formatName),
     getPreview: getPreview(formatName)
   });
   editor.formatter.register(formatName, newItem);
   return newItem;
 };

const makeAnnotation = (eDoc: Document, { uid = Id.generate('mce-annotation'), ...data }, annotationName: string, decorate: Decorator): Element => {
  const master = Element.fromTag('span', eDoc);
  Class.add(master, Markings.annotation());
  Attr.set(master, `${Markings.dataAnnotationId()}`, uid);
  Attr.set(master, `${Markings.dataAnnotation()}`, annotationName);

  const { attributes = { }, classes = [ ] } = decorate(uid, data);
  Attr.setAll(master, attributes);
  Classes.add(master, classes);
  return master;
};

 editor.undoManager.transact(function () {
   const cache = editor.editorUpload.blobCache;
   const info = cache.create(
     Id.generate('mceu'), blob, base64
   );
   cache.add(info);
   const img = editor.dom.createHTML('img', {
     src: info.blobUri()
   });
   editor.insertContent(img);
 });

const build = (items: string | Array<string | SingleMenuItemApi>, itemResponse: ItemResponse, backstage: UiFactoryBackstage): Option<TieredData> => {
  const primary = Id.generate('primary-menu');
  const data = expand(items, backstage.shared.providers.menuItems());
  if (data.items.length === 0) {
    return Option.none();
  }

  const mainMenu = createPartialMenu(primary, data.items, itemResponse, backstage);
  const submenus = Obj.map(data.menus, (menuItems, menuName) => createPartialMenu(menuName, menuItems, itemResponse, backstage));
  const menus = Merger.deepMerge(submenus, Objects.wrap(primary, mainMenu));
  return Option.from(TieredMenu.tieredData(primary, menus, data.expansions));
};