export function makeCollapsible(document: Document,
                                kind: string,
                                headingId: string,
                                collapseId: string,
                                additional: AdditionalClasses = {}):
Collapsible {
  let additionalGroupClasses = additional.group;
  let additionalPanelClasses = additional.panel;
  let additionalToggleClasses = additional.toggle;

  additionalPanelClasses =
    additionalPanelClasses !== undefined ? ` ${additionalPanelClasses}` : "";

  additionalGroupClasses =
    additionalGroupClasses !== undefined ? ` ${additionalGroupClasses}` : "";

  additionalToggleClasses =
    additionalToggleClasses !== undefined ? ` ${additionalToggleClasses}` : "";

  const el = domutil.htmlToElements(
    _.template(collapsibleTemplate)({
      kind: kind,
      group_classes: additionalGroupClasses,
      panel_classes: additionalPanelClasses,
      toggle_classes: additionalToggleClasses,
      heading_id: headingId,
      collapse_id: collapseId,
    }), document)[0] as HTMLElement;

  return {
    group: el,
    heading: el.getElementsByTagName("a")[0],
    content: el.getElementsByClassName("panel-body")[0] as HTMLElement,
  };
}

export function replaceSemanticFields(editor: EditorAPI,
                                      data: SemanticFieldTransformationData):
void {
  const dataCaret = editor.caretManager.getDataCaret(true)!;
  const guiCaret = editor.caretManager.fromDataLocation(dataCaret)!;
  const guiSfsContainer = domutil.closestByClass(guiCaret.node,
                                                 "btw:semantic-fields",
                                                 editor.guiRoot);
  if (guiSfsContainer === null) {
    throw new Error("unable to acquire btw:semantic-fields");
  }

  const sfsContainer = editor.toDataNode(guiSfsContainer)!;
  const sfsParent = sfsContainer.parentNode!;
  const sfsIndex = _indexOf.call(sfsParent.childNodes, sfsContainer);
  // Remove the container from the tree.
  editor.dataUpdater.removeNode(sfsContainer);

  // and manipulate it off-line.
  while (sfsContainer.firstChild !== null) {
    sfsContainer.removeChild(sfsContainer.firstChild);
  }

  const doc = sfsContainer.ownerDocument;
  const newPaths = data.newPaths;
  const mode = editor.modeTree.getMode(sfsContainer);
  const ename = mode.getAbsoluteResolver().resolveName("btw:sf")!;

  for (const path of newPaths) {
    const sf = makeElement(doc, ename.ns, "btw:sf");
    sf.textContent = path;
    sfsContainer.appendChild(sf);
  }

  // Finally, reintroduce it to the data tree.
  editor.dataUpdater.insertNodeAt(sfsParent, sfsIndex, sfsContainer);
  editor.caretManager.setCaret(sfsContainer, 0);
}

  execute(data: {}): void {
    const editor = this.editor;
    const dataCaret = editor.caretManager.getDataCaret(true)!;
    const guiCaret = editor.caretManager.fromDataLocation(dataCaret)!;
    const guiSfsContainer =
      domutil.closestByClass(guiCaret.node, "btw:semantic-fields",
                             editor.guiRoot);
    if (guiSfsContainer === null) {
      throw new Error("unable to acquire btw:semantic-fields");
    }

    const mode = editor.modeTree.getMode(dataCaret.node);
    if (!(mode instanceof Mode)) {
      throw new Error("expected BTW mode");
    }

    const decorator = editor.modeTree.getDecorator(dataCaret.node);
    if (!(decorator instanceof BTWDecorator)) {
      throw new Error("our decorator must be a BTWDecorator");
    }

    const fetcher = decorator.sfFetcher;

    const sfsContainer = editor.toDataNode(guiSfsContainer) as Element;
    const sfs = domutil.dataFindAll(sfsContainer, "btw:sf",
                                    mode.getAbsoluteNamespaceMappings());

    const paths = sfs.map((sf) => sf.textContent!);

    const modal = getEditSemanticFieldModal(editor);

    const fieldToPath = (f) => f.get("path");

    let sfEditor;
    const primary = modal.getPrimary()[0];
    primary.classList.add("disabled");
    modal.setBody("<i class='fa fa-spinner fa-2x fa-spin'></i>");

    const $modalTop = modal.getTopLevel();
    const body =
      $modalTop[0].getElementsByClassName("modal-body")[0] as HTMLElement;
    const content =
      $modalTop[0].getElementsByClassName("modal-content")[0] as HTMLElement;
    const header = $modalTop[0].getElementsByClassName("modal-header")[0];
    const footer = $modalTop[0].getElementsByClassName("modal-footer")[0];

    $modalTop.on("shown.bs.modal.modal", () => {
      // Once we have shown the modal we set its height to the max-height so
      // that the children of the body can use height percentages.
      content.style.height = content.style.maxHeight;
      const contentHeight = content.getBoundingClientRect().height;
      body.style.height =
        `${contentHeight - header.getBoundingClientRect().height -
footer.getBoundingClientRect().height}px`;
    });

    modal.modal(() => {
      const clicked = modal.getClickedAsText();
      if (clicked === "Commit") {
        if (!sfEditor) {
          throw new Error("modal dismissed with primary button " +
                          "while sfEditor is non-existent");
        }

        mode.replaceSemanticFields.execute(
          { newPaths: sfEditor.getChosenFields().map(fieldToPath) });
      }
    });

    fetcher.fetch(paths).then((resolved) => {
      const fields = _.values(resolved);

      // We grab the list of paths from the resolved fields because initially we
      // may have unknown fields, and the list of resolve fields may be shorter
      // than ``paths``.
      // Reminder: fields are plain old JS objects.
      const initialPaths = fields.map((x) => x.path);

      // Clear it before the editor is started.
      modal.setBody("");
      sfEditor = new SFEditor({
        container: body,
        fields: fields,
        fetcher: fetcher,
        searchUrl: mode.semanticFieldFetchUrl,
      });
      sfEditor.start();

      sfEditor.on("sf:chosen:change", () => {
        const newPaths = sfEditor.getChosenFields().map(fieldToPath);
        const method = _.isEqual(initialPaths, newPaths) ? "add" : "remove";
        primary.classList[method]("disabled");
      });
    });
  }

 $(guiNode).one("wed-refresh", () => {
   editor.caretManager.setCaret(
     guiNode,
     _indexOf.call(guiNode.childNodes,
                   domutil.childByClass(guiNode, "_ref_abbr")) as number + 1);
 });

 toGUISelector(selector: string): string {
   return domutil.toGUISelector(selector, this.mapping);
 }

 dataFindAll(el: Element, selector: string): Element[] {
   return domutil.dataFindAll(el, selector, this.mapping);
 }

export function termsForSense(sense: Element,
                              mappings: Record<string, string>):
NodeListOf<Element> {
  return sense.querySelectorAll(
    domutil.toGUISelector("btw:english-rendition>btw:english-term", mappings));
}

  sfDecorator(root: Element, el: Element): void {
    //
    // When editing them, ``btw:sf`` contains the semantic field paths, and
    // there are no names.
    //
    // When displaying articles, the paths are in encoded ``ref`` attribute, and
    // the ``btw:sf`` elements contain the names + path of the semantic fields.
    //

    // We're already wrapped.
    if (domutil.closestByClass(el, "field-view", root) !== null) {
      return;
    }

    const inMode = this._inMode;
    const parent = el.parentNode!;
    const before = el.previousSibling;

    let ref;
    if (!inMode) {
      const dataWedRef = el.attributes[ENCODED_REF_ATTR_NAME];
      if (dataWedRef) {
        ref = el.attributes[ENCODED_REF_ATTR_NAME].value;
      }

      // We do not decorate if we have no references.
      if (ref === undefined) {
        return;
      }
    }
    else {
      const dataNode = this.editor.toDataNode(el)!;
      ref = dataNode.textContent;
    }

    const view = new FieldView({
      // We start the view with a fake field. This will be fixed later.
      model: new Field({
        heading: "",
        path: ref,
      }),

      fetcher: this.sfFetcher,
    });
    view.render();
    // tslint:disable-next-line:no-inner-html
    view.ui.field[0].innerHTML = "";
    view.ui.field[0].appendChild(el);
    this.guiUpdater.insertBefore(
      parent as Element, view.el,
      before !== null ? before.nextSibling : parent.firstChild);

    if (inMode) {
      // When we are editing we want to fill the semantic field with its name
      // and path.
      this.sfFetcher.fetch([ref]).then((resolved) => {
        const resolvedRef = resolved[ref];
        el.textContent = (resolvedRef !== undefined) ?
          `${resolvedRef.heading_for_display} (${ref})` :
          `Unknown field (${ref})`;
      });
    }
  }