const toggleThrobber = (comp: AlloyComponent, state: boolean, providerBackstage: UiFactoryBackstageProviders) => {
  const element = comp.element();
  if (state === true) {
    Replacing.set(comp, [ renderSpinner(providerBackstage) ]);
    Css.remove(element, 'display');
    Attr.remove(element, 'aria-hidden');
  } else {
    Replacing.set(comp, [ ]);
    Css.set(element, 'display', 'none');
    Attr.set(element, 'aria-hidden', 'true');
  }
};

      return memContainer.getOpt(anyInSystem).map((panel) => {
        const aImg = GuiFactory.external({
          element: img
        });

        Replacing.replaceAt(panel, 1, Option.some(aImg));

        const lastViewRect = viewRectState.get();
        const viewRect = {
          x: 0,
          y: 0,
          w: img.dom().naturalWidth,
          h: img.dom().naturalHeight
        };
        viewRectState.set(viewRect);
        const rect = Rect.inflate(viewRect, -20, -20);
        rectState.set(rect);

        if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
          zoomFit(panel, img);
        }

        repaintImg(panel, img);
        return img;
      });

export const renderLabel = (spec: Types.Label.Label, backstageShared: UiFactoryBackstageShared): SimpleSpec => {
  const label = {
    dom: {
      tag: 'label',
      innerHtml: backstageShared.providers.translate(spec.label),
      classes: ['tox-label']
    }
  } as AlloySpec;
  const comps = Arr.map(spec.items, backstageShared.interpreter);
  return {
    dom: {
      tag: 'div',
      classes: ['tox-form__group']
    },
    components: [
      label
    ].concat(comps),
    behaviours: Behaviour.derive([
      ComposingConfigs.self(),
      Replacing.config({}),
      RepresentingConfigs.domHtml(Option.none()),
      Keying.config({
        mode: 'acyclic'
      }),
    ])
  };
};

          Step.sync(() => {

            Replacing.set(component, [
              {
                dom: {
                  tag: 'div',
                  classes: [ 'child-1' ]
                },
                behaviours: SimpleBehaviours.unnamedEvents([
                  onControlAttached(infoWithDestroy, cellWithDestroy),
                  onControlDetached(infoWithDestroy, cellWithDestroy)
                ])
              },
              {
                dom: {
                  tag: 'div',
                  classes: [ 'child-2' ]
                },
                behaviours: SimpleBehaviours.unnamedEvents([
                  onControlAttached(infoWithoutDestroy, cellWithoutDestroy),
                  onControlDetached(infoWithoutDestroy, cellWithoutDestroy)
                ])
              }
            ]);
          }),

const renderReplacableIconFromPack = (iconName: string, iconsProvider: IconProvider): SimpleOrSketchSpec => {
  return renderIcon(getIcon(iconName, iconsProvider), {
    behaviours: Behaviour.derive([
      Replacing.config({ })
    ])
  });
};

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"]'
        })
      ])
    })]
  };
}

 const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
   if (comp.getSystem().isConnected()) {
     const banner = memBannerText.get(comp);
     Replacing.set(banner, [
       GuiFactory.text(text)
     ]);
   }
 };

const renderLabel = (text: TranslateIfNeeded, prefix: string, providersBackstage: UiFactoryBackstageProviders) => ({
  dom: {
    tag: 'span',
    innerHtml: providersBackstage.translate(text),
    classes: [ `${prefix}__select-label` ]
  },
  behaviours: Behaviour.derive([
    Replacing.config({ })
  ])
});

 (store, doc, body) => {
   return GuiFactory.build({
     dom: {
       tag: 'div',
       classes: [ 'test-container' ]
     },
     behaviours: Behaviour.derive([
       Replacing.config({ })
     ])
   });
 },

const makeSocket = function () {
  return GuiFactory.build(
    Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-editor-socket"></div>'),
      components: [ ],
      containerBehaviours: Behaviour.derive([
        Replacing.config({ })
      ])
    })
  );
};