import { dynamic } from "@solidjs/web";
import { createMemo, createSignal, omit } from "solid-js";
import { useDirection } from "../direction-provider/direction-provider-context.jsx";
import { CompositeList } from "../internals/composite/composite-list.jsx";
import { useCompositeRoot } from "../internals/composite/composite-root.jsx";
import { mergeRootProps } from "../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../internals/resolve-class-style.jsx";
import { ToolbarRootContext } from "./toolbar-root-context.jsx";

// Audited 2026-04-20:
//
// React's `<ToolbarRoot>` keeps a `useState<Map<Node, CompositeMetadata>>` and
// projects `disabledIndices` from it. That single map is populated by
// `<CompositeList onMapChange={setItemMap}>`, so the "registry" and the
// composite-list sorted map are the same thing.
//
// Here we do the same: the `<CompositeList<ToolbarRootItemMetadata>>` below
// already carries `focusableWhenDisabled` (supplied via each item's
// `useCompositeListItem({ metadata })` call) along with the resolved `index`.
// Capturing the map from `onMapChange` and deriving `disabledIndices` from
// that single source is enough — no auxiliary per-node registry needed.

/**
 * A container for grouping a set of controls — buttons, toggle groups,
 * separators, links. Renders a `<div role="toolbar">` (or `as` override) with
 * arrow-key navigation between focusable items.
 */
export function ToolbarRoot(props) {
  const disabled = () => props.disabled === true;
  const orientation = () => props.orientation ?? "horizontal";
  const loopFocus = () => props.loopFocus ?? true;
  const direction = useDirection();
  const [sortedMap, setSortedMap] = createSignal(new Map(), {
    name: "toolbar.sortedMap",
    ownedWrite: true
  });
  const onMapChange = map => {
    setSortedMap(map);
  };
  const disabledIndices = createMemo(() => {
    const map = sortedMap();
    if (map.size === 0) return [];
    const out = [];
    for (const entry of map.values()) {
      const idx = entry?.index;
      if (entry != null && entry.focusableWhenDisabled === false && typeof idx === "number") {
        out.push(idx);
      }
    }
    return out;
  }, {
    name: "toolbar.disabledIndices"
  });
  const composite = useCompositeRoot({
    direction,
    get orientation() {
      return orientation();
    },
    get loopFocus() {
      return loopFocus();
    },
    enableHomeAndEndKeys: true,
    disabledIndices: () => disabledIndices()
  });
  const contextValue = {
    disabled,
    orientation,
    present: true
  };
  const userClassStyle = resolveClassStyle(props, () => ({
    disabled: disabled(),
    orientation: orientation()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "children", "disabled", "loopFocus", "orientation");
  const internalProps = {
    ref: composite.rootRef,
    role: "toolbar",
    get "aria-orientation"() {
      return orientation();
    },
    get "data-orientation"() {
      return orientation();
    },
    get "data-disabled"() {
      return disabled() ? "" : undefined;
    }
  };
  const merged = mergeRootProps(mergeRootProps(mergeRootProps(internalProps, composite.props), userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged}>
			<ToolbarRootContext value={contextValue}>
				<CompositeList elementsRef={composite.elementsRef} onMapChange={map => {
        onMapChange(map);
        composite.onMapChange(map);
      }}>
					{props.children}
				</CompositeList>
			</ToolbarRootContext>
		</Tag>;
}
//# sourceMappingURL=toolbar-root.jsx.map