import type { HeaderContext, HeaderView } from "@berry/api/web.ts";
import { keyed } from "./ui.ts";

export type HeaderItem = { name: string; create: () => HeaderView };

/** The selected extensions' header widgets, owned by one conversation view. */
export function headerWidgets() {
  const element = document.createElement("span");
  element.className = "extension-headers";
  const views = keyed<{ item: HeaderItem; context: HeaderContext }, string>(
    element,
    ({ item }) => item.name,
    ({ item, context }) => {
      let create = item.create;
      let view = create();
      view.update(context);
      return {
        get node() {
          return view.element;
        },
        update: ({ item, context }) => {
          if (create !== item.create) {
            const previous = view.element;
            view.dispose?.();
            create = item.create;
            view = create();
            previous.replaceWith(view.element);
          }
          view.update(context);
        },
        dispose: () => view.dispose?.(),
      };
    },
  );
  return {
    element,
    /** `context` is each widget's own, as its extension's handlers are. */
    update(items: readonly HeaderItem[], context: (extension: string) => HeaderContext) {
      views.sync(items.map((item) => ({ item, context: context(item.name) })));
      element.hidden = items.length === 0;
    },
    dispose: () => views.dispose(),
  };
}