xmuse

  on("ui.render", { component: "Pane", requestId: PANE_ID }, async ($, e) => {
    const els = $.ui.resolve(e);
    const at = await $.clock.now();
    const onExpand = (moduleId: string): void => {
      void update($, cacheAtom, (c) => {
        const cur = c as XmuseCache;
        const expanded = { ...cur.expanded };
        if (expanded[moduleId] === true) delete expanded[moduleId];
        else expanded[moduleId] = true;
        return { ...cur, expanded };
      });
    };
    const onControl = (key: string): void => {
      void pressControl($, key);
    };
    const onSubmitKey = (key: string, value: string): void => {
      void submitControl($, key, value);
    };
    const onSubmit = onSubmitKey;
    void onSubmit;
    try {
      const cache = (await read($, cacheAtom)) as XmuseCache;
      const nodes = buildPaneNodes(cache, at);
      return PaneTree({ els: els as never, nodes, onExpand, onControl, onSubmit: onSubmitKey }) as never;
    } catch {
      return PaneTree({
        els: els as never,
        nodes: [{ type: "text", text: "xmuse 看板暂不可用" }],
        onExpand,
        onControl,
        onSubmit: onSubmitKey,
      }) as never;
    }
  });

export function PaneTree(props: {
  els: PaneEls;
  nodes: PaneNode[];
  onExpand: (moduleId: string) => void;
  onControl: (key: string) => void;
  onSubmit: (key: string, value: string) => void;
}): unknown {
  const { Box, Text, Button, Link } = props.els;
  const Field = props.els.Input;
  return (
    <Box flexDirection="column">
      {props.nodes.map((n, i) => {
        if (n.type === "text") {
          return (
            <Text key={"t" + String(i)} dimColor={n.dim === true ? true : undefined}>
              {n.text}
            </Text>
          );
        }
        if (n.type === "input") {
          if (Field === undefined) return <Text key={n.key} dimColor>{n.label}</Text>;
          return (
            <Field
              key={n.key}
              label={n.label}
              placeholder={n.placeholder}
              submitLabel={n.submitLabel}
              value={n.value ?? ""}
              onSubmit={(value: string) => props.onSubmit(n.key, value)}
            />
          );
        }
        if (n.type === "button") {
          if (n.key.startsWith("expand-")) {
            const moduleId = n.key.slice("expand-".length);
            return <Button key={n.key} label={n.label} onPress={() => props.onExpand(moduleId)} />;
          }
          return <Button key={n.key} label={n.label} onPress={() => props.onControl(n.key)} />;
        }
        return <Link key={n.key} label={n.label} href={n.href} />;
      })}
    </Box>
  );
}