const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};

 withRoot((_) => {
   const body = access.getBody();
   const bodyState = Reflecting.getState(body);
   if (bodyState.get().exists((b) => b.isTabPanel())) {
     Composing.getCurrent(body).each((tabSection) => {
       TabSection.showTab(tabSection, title);
     });
   }
 });

const childAt = (index: number) => {
  return Composing.config({
    find: (comp: AlloyComponent) => {
      return Traverse.child(comp.element(), index).bind((element) => {
        return comp.getSystem().getByDom(element).toOption();
      });
    }
  });
};

 getValue: (comp) => {
   const picker = memPicker.get(comp);
   const optRgbForm = Composing.getCurrent(picker);
   const optHex = optRgbForm.bind((rgbForm) => {
     const formValues = Representing.getValue(rgbForm);
     return formValues.hex as Option<string>;
   }) ;
   return optHex.map((hex) => '#' + hex).getOr('');
 },

 Step.sync(() => {
   const zone = Composing.getCurrent(component).getOrDie(
     'Failed trying to get the zone from the container'
   );
   const filesValue = Representing.getValue(zone);
   Assertions.assertEq('Checking value of dropzone', [
     { name: 'image1.png' },
     { name: 'image3.jpg' }
   ], filesValue);
 })

 const openUrlPicker = (comp: AlloyComponent) => {
   Composing.getCurrent(comp).each((field) => {
     const urlData = Representing.getValue(field);
     optUrlPicker.each((picker) => {
       picker(urlData).get((chosenData) => {
         Representing.setValue(field, chosenData);
         AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name });
       });
     });
   });
 };

    (doc, body, gui, component, store) => {

      const frame = Composing.getCurrent(component).getOrDie(
        'Could not find internal frame field'
      );

      // TODO: Make a webdriver test re: keyboard navigation.
      return [
        sAssertInitialIframeStructure(component),
        RepresentingSteps.sSetValue('Setting to a paragraph', frame, '<p><span class="me">Me</span></p>'),
        platformNeedsSandboxing ? sAssertSandboxedIframeContent(frame) : sAssertStandardIframeContent(frame)
      ];
    },

 return optSlider.bind((slider) => {
   const sidebarOpen = Sliding.isGrowing(slider) || Sliding.hasGrown(slider);
   if (sidebarOpen) {
     const optSlotContainer = Composing.getCurrent(slider);
     return optSlotContainer.bind((slotContainer) =>
       Arr.find(SlotContainer.getSlotNames(slotContainer), (name) =>
         SlotContainer.isShowing(slotContainer, name)
       )
     );
   } else {
     return Option.none();
   }
 });

const getCompByName = (access: DialogAccess<any>, name: string): Option<AlloyComponent> => {
  // TODO: Add API to alloy to find the inner most component of a Composing chain.
  const root = access.getRoot();
  // This is just to avoid throwing errors if the dialog closes before this. We should take it out
  // while developing (probably), and put it back in for the real thing.
  if (root.getSystem().isConnected()) {
    const form = Composing.getCurrent(access.getFormWrapper()).getOr(access.getFormWrapper());
    return Form.getField(form, name).fold(() => {
      const footer = access.getFooter();
      const footerState = Reflecting.getState(footer);
      return footerState.get().bind((f) => f.lookupByName(form, name));
    }, (comp) => {
      return Option.some(comp);
    });
  } else {
    return Option.none();
  }
};