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 { useButton } from "../internals/use-button/use-button.jsx";
import { useToolbarGroupContext } from "./toolbar-group-context.jsx";
import { useToolbarRootContext } from "./toolbar-root-context.jsx";
/**
 * A button inside a `<Toolbar.Root>`. Participates in the toolbar's arrow-key
 * navigation through `<CompositeList>` + `useCompositeItem`-style wiring.
 */
export function ToolbarButton(props) {
  const toolbar = useToolbarRootContext();
  const group = useToolbarGroupContext();
  const focusableWhenDisabled = () => props.focusableWhenDisabled ?? true;
  const ownDisabled = () => props.disabled === true;
  const disabled = () => toolbar.disabled() || group.disabled() || ownDisabled();
  const nativeButton = () => props.nativeButton ?? true;
  const orientation = () => toolbar.orientation();
  const {
    props: buttonProps,
    ref: buttonRef
  } = useButton({
    disabled,
    focusableWhenDisabled,
    native: nativeButton
  });
  const {
    ref: listItemRef,
    index: itemIndex
  } = useCompositeListItem({
    get metadata() {
      return {
        focusableWhenDisabled: focusableWhenDisabled()
      };
    }
  });
  const rootContext = useCompositeRootContext(true);
  const composedRef = el => {
    buttonRef(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, () => ({
    disabled: disabled(),
    orientation: orientation(),
    focusable: !disabled() || focusableWhenDisabled()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "disabled", "focusableWhenDisabled", "nativeButton");
  const internalProps = {
    ref: composedRef,
    get tabIndex() {
      return compositeTabIndex();
    },
    onFocus: onCompositeFocus,
    get "data-orientation"() {
      return orientation();
    },
    get "data-disabled"() {
      return disabled() ? "" : undefined;
    }
  };
  const merged = mergeRootProps(mergeRootProps(mergeRootProps(internalProps, buttonProps), userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "button");
  return <Tag {...merged} />;
}
//# sourceMappingURL=toolbar-button.jsx.map