import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { useCompositeRootContext } from "../internals/composite/composite-context.jsx";
import { useCompositeListItem } from "../internals/composite/composite-list.jsx";
import { mergeRootProps } from "../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../internals/resolve-class-style.jsx";
import { useToolbarRootContext } from "./toolbar-root-context.jsx";
// Links participate in arrow navigation but cannot be "disabled" in HTML — so
// their metadata always reports `focusableWhenDisabled: true` (matches React:
// the flag is only used for deriving `disabledIndices`).
const LINK_METADATA = {
  focusableWhenDisabled: true
};

/**
 * A link inside a `<Toolbar.Root>`. Renders an `<a>` element (or `as` override)
 * and participates in arrow-key navigation through the composite root.
 */
export function ToolbarLink(props) {
  const toolbar = useToolbarRootContext();
  const rootContext = useCompositeRootContext(true);
  const orientation = () => toolbar.orientation();
  const {
    ref: listItemRef,
    index: itemIndex
  } = useCompositeListItem({
    metadata: LINK_METADATA
  });

  // Metadata reaches `<Toolbar.Root>` via the composite-list sorted map
  // (see the header comment in toolbar-root.tsx) — no separate registry.
  const composedRef = el => {
    listItemRef(el);
  };
  const compositeTabIndex = () => {
    if (!rootContext) return undefined;
    return rootContext.highlightedIndex() === itemIndex() ? 0 : -1;
  };
  const onCompositeFocus = () => {
    if (!rootContext) return;
    const i = itemIndex();
    if (i >= 0) rootContext.onHighlightedIndexChange(i);
  };
  const userClassStyle = resolveClassStyle(props, () => ({
    orientation: orientation()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs");
  const internalProps = {
    ref: composedRef,
    get tabIndex() {
      return compositeTabIndex();
    },
    onFocus: onCompositeFocus,
    get "data-orientation"() {
      return orientation();
    }
  };
  const merged = mergeRootProps(mergeRootProps(internalProps, userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "a");
  return <Tag {...merged} />;
}
//# sourceMappingURL=toolbar-link.jsx.map