import { dynamic } from "@solidjs/web";
import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id.jsx";
import { createChangeEventDetails, REASONS } from "../../internals/change-event-details.jsx";
import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/composite-constants.jsx";
import { useCompositeItem } from "../../internals/composite/composite-item.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 { useTabsListContext } from "../tabs-list-context.jsx";
import { useTabsRootContext } from "../tabs-root-context.jsx";
/**
 * A single selectable tab button. Renders a `<button role="tab">`.
 *
 * Registers with `<Tabs.List>`'s composite list so arrow keys move focus
 * between siblings; activation is delivered through the list context.
 * `aria-controls` is wired to the matching `<Tabs.Panel>`'s DOM id via the
 * root-level mounted-panel registry.
 */
export function TabsTab(props) {
  const root = useTabsRootContext();
  const list = useTabsListContext();
  const disabled = () => props.disabled === true;
  const nativeButton = () => props.nativeButton ?? true;

  // Id overrides are setup-time only (matches field/slider/number-field):
  // untrack the body read so it doesn't trip `[STRICT_READ_UNTRACKED]`.
  const id = useBaseUiId(untrack(() => typeof props.id === "string" ? props.id : undefined));
  const active = createMemo(() => root.value() === props.value);
  const metadata = createMemo(() => ({
    disabled: disabled(),
    id,
    value: props.value
  }));
  const {
    props: compositeProps,
    ref: compositeRef,
    index
  } = useCompositeItem({
    get metadata() {
      return metadata();
    }
  });
  const {
    props: buttonProps,
    ref: buttonRef
  } = useButton({
    disabled,
    native: nativeButton,
    focusableWhenDisabled: true,
    // Composite-item behavior: `useButton` yields tabIndex to the composite
    // item's roving-focus projection (so only the highlighted tab is
    // tabbable) and switches Space activation to keydown.
    composite: true
  });

  // Element tracking for resize-observer registration — pulled into an
  // owned effect so the unregister fires on component disposal.
  const [tabEl, setTabEl] = createSignal(null, {
    ownedWrite: true
  });
  createEffect(() => tabEl(), el => {
    if (!el) return undefined;
    return list.registerTabResizeObserverElement(el);
  });
  const onClick = event => {
    if (active() || disabled()) return;
    list.onTabActivation(props.value, createChangeEventDetails(REASONS.none, event, undefined, {
      activationDirection: "none"
    }));
  };
  const onFocus = event => {
    if (active()) return;
    const i = index();
    if (i > -1 && !disabled()) {
      list.setHighlightedTabIndex(i);
    }
    if (disabled()) return;
    if (list.activateOnFocus()) {
      list.onTabActivation(props.value, createChangeEventDetails(REASONS.none, event, undefined, {
        activationDirection: "none"
      }));
    }
  };
  const userClassStyle = resolveClassStyle(props, () => ({
    disabled: disabled(),
    active: active(),
    orientation: root.orientation()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "children", "disabled", "nativeButton", "value");
  const internalProps = {
    id,
    role: "tab",
    ref: el => untrack(() => {
      buttonRef(el);
      compositeRef(el);
      setTabEl(el);
      if (el && active()) {
        el.setAttribute(ACTIVE_COMPOSITE_ITEM, "");
      }
    }),
    onClick,
    onFocus,
    get "aria-controls"() {
      return root.getTabPanelIdByValue(props.value) ?? "";
    },
    get "aria-selected"() {
      return active() ? "true" : "false";
    },
    get "data-orientation"() {
      return root.orientation();
    },
    get "data-active"() {
      return active() ? "" : undefined;
    },
    get "data-disabled"() {
      return disabled() ? "" : undefined;
    }
  };
  const merged = mergeRootProps(mergeRootProps(mergeRootProps(mergeRootProps(internalProps, compositeProps), buttonProps), userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "button");
  return <Tag {...merged}>{props.children}</Tag>;
}
//# sourceMappingURL=tabs-tab.jsx.map