const getDom = () => {
    const common = ItemClasses.colorClass;
    const icon = iconSvg.getOr('');
    const title = itemText.map((text) => ` title="${providerBackstage.translate(text)}"`).getOr('');

    if (itemValue === colorPickerCommand) {
      return DomFactory.fromHtml(`<button class="${common} tox-swatches__picker-btn"${title}>${icon}</button>`);
    } else if (itemValue === removeColorCommand) {
      return DomFactory.fromHtml(`<div class="${common} tox-swatch--remove"${title}>${icon}</div>`);
    } else {
      return DomFactory.fromHtml(`<div class="${common}" style="background-color: ${itemValue}" data-mce-color="${itemValue}"${title}></div>`);
    }
  };

const renderSpinner = (providerBackstage: UiFactoryBackstageProviders): AlloySpec => {
  return {
    dom: {
      tag: 'div',
      attributes: {
        'aria-label': providerBackstage.translate('Loading...')
      },
      classes: [ 'tox-throbber__busy-spinner' ]
    },
    components: [
      {
        dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
      }
    ],
    behaviours: Behaviour.derive([
      // Trap the "Tab" key and don't let it escape.
      Keying.config({
        mode: 'special',
        onTab: () => Option.some(true),
        onShiftTab: () => Option.some(true)
      }),
      Focusing.config({ })
    ])
  };
};

const renderFooter = (initFoo: WindowFooterFoo, providersBackstage: UiFactoryBackstageProviders) => {
  const updateState = (_comp, data: WindowFooterFoo) => {
    const footerButtons: DialogMemButton[] = Arr.map(data.buttons, (button) => {
      const memButton = Memento.record(makeButton(button, providersBackstage));
      return {
        name: button.name,
        align: button.align,
        memento: memButton
      };
    });

    const lookupByName = (
      compInSystem: AlloyComponent,
      buttonName: string
    ) => lookup(compInSystem, footerButtons, buttonName);

    return Option.some({
      lookupByName,
      footerButtons
    });
  };

  return {
    dom: DomFactory.fromHtml(`<div class="tox-dialog__footer"></div>`),
    components: [ ],
    behaviours: Behaviour.derive([
      Reflecting.config({
        channel: footerChannel,
        initialData: initFoo,
        updateState,
        renderComponents
      })
    ])
  };
};

const renderModalHeader = (foo: WindowHeaderFoo, providersBackstage: UiFactoryBackstageProviders): AlloySpec => {
  const pTitle = ModalDialog.parts().title(
    renderTitle(foo, Option.none(), providersBackstage)
  );

  const pHandle = ModalDialog.parts().draghandle({
    dom: DomFactory.fromHtml('<div class="tox-dialog__draghandle"></div>')
  });

  const pClose = ModalDialog.parts().close(
    renderClose(providersBackstage)
  );

  const components = [ pTitle ].concat(foo.draggable ? [ pHandle ] : []).concat([ pClose ]);
  return Container.sketch({
    dom: DomFactory.fromHtml('<div class="tox-dialog__header"></div>'),
    components
  });
};

const pBodyMessage = (message: string, providersBackstage: UiFactoryBackstageProviders) => ModalDialog.parts().body({
  dom: {
    tag: 'div',
    classes: [ 'tox-dialog__body', 'todo-tox-fit' ]
  },
  components: [
    {
      dom: DomFactory.fromHtml(`<p>${providersBackstage.translate(message)}</p>`)
    }
  ]
});

 const display = (label: string, spec: SimpleSpec) => {
   return {
     dom: {
       tag: 'div',
       styles: { border: '1px solid #aaa', margin: '1em', padding: '1em' }
     },
     components: [
       { dom: DomFactory.fromHtml('<h3>' + label + '</h3>') },
       { dom: { tag: 'hr' } },
       spec
     ]
   };
 };

export default () => {

  const oldSink = document.querySelectorAll('.mce-silver-sink');
  if (oldSink.length > 0) {
    throw Error('old sinks found, a previous test did not call helpers.destroy() leaving artifacts, found: ' + oldSink.length);
  }

  const sink = GuiFactory.build({
    dom: DomFactory.fromHtml('<div class="mce-silver-sink"></div>'),
    behaviours: Behaviour.derive([
      Positioning.config({
        useFixed: true
      })
    ])
  });

  const uiMothership = Gui.create();
  Class.add(uiMothership.element(), 'tox');

  const backstage = TestBackstage(sink);

  const mockEditor = {
    setContent: (content) => {},
    insertContent: (content: string, args?: any) => {},
    execCommand: (cmd: string, ui?: boolean, value?: any) => {}
  } as Editor;

  const extras = {
    editor: mockEditor,
    backstage
  };

  uiMothership.add(sink);
  Attachment.attachSystem(Body.body(), uiMothership);

  const destroy = () => {
    uiMothership.remove(sink);
    uiMothership.destroy();
  };

  return {
    backstage,
    shared: backstage.shared,
    extras,
    destroy,
    uiMothership,
    mockEditor
  };
};

 ModalDialog.setBusy(lazyDialog(), (d, bs) => {
   return {
     dom: {
       tag: 'div',
       classes: [ 'tox-dialog__busy-spinner' ],
       attributes: {
         'aria-label': blockEvent.message()
       },
       styles: {
         left: '0px',
         right: '0px',
         bottom: '0px',
         top: '0px',
         position: 'absolute'
       }
     },
     behaviours: bs,
     components: [
       {
         dom: DomFactory.fromHtml(`<div class="tox-spinner"><div></div><div></div><div></div></div>`)
       }
     ]
   };
 });