import { dynamic } from "@solidjs/web";
import { createSignal, omit, onCleanup } from "solid-js";
import { useDirection } from "../../direction-provider/direction-provider-context.jsx";
import { CompositeRootContext } from "../../internals/composite/composite-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 { TabsListContext } from "../tabs-list-context.jsx";
import { useTabsRootContext } from "../tabs-root-context.jsx";
/**
 * Groups the `<Tabs.Tab>` buttons + (optionally) the `<Tabs.Indicator>` into
 * a single keyboard-navigable widget. Renders a `<div role="tablist">`.
 *
 * Composite-focus wiring: arrow keys move the roving focus between tabs,
 * Home/End jump to the first/last non-disabled tab, and Enter/Space activates
 * the focused tab (via `<Tabs.Tab>`'s `useButton`). When `activateOnFocus` is
 * `true`, focus alone activates the tab — child tabs read this through the
 * list context + apply it inside their own `onFocus` handler.
 */
export function TabsList(props) {
  const rootContext = useTabsRootContext();
  const direction = useDirection();
  const activateOnFocus = () => props.activateOnFocus ?? false;
  const loopFocus = () => props.loopFocus ?? true;
  const [tabsListElement, setTabsListElement] = createSignal(null, {
    ownedWrite: true
  });

  // Resize observer bookkeeping. Child tabs register their element via
  // `registerTabResizeObserverElement`; the indicator rerenders on every
  // observed size change (through its own subscription — tier-3b MVP
  // doesn't ship the full observer, so this is exposed as a register/unregister
  // pair for forward compatibility + to satisfy tab signatures).
  const tabResizeObserverElements = new Set();
  let resizeObserver = null;
  const ensureObserver = () => {
    if (resizeObserver) return resizeObserver;
    if (typeof ResizeObserver === "undefined") return null;
    resizeObserver = new ResizeObserver(() => {
      // Intentionally empty — indicator measurement is recomputed in its
      // own render effect from the live DOM, and the observer's role is
      // to trigger a re-measure. A future iteration will expose a
      // listener API here.
    });
    return resizeObserver;
  };
  const registerTabResizeObserverElement = element => {
    tabResizeObserverElements.add(element);
    const observer = ensureObserver();
    observer?.observe(element);
    return () => {
      tabResizeObserverElements.delete(element);
      observer?.unobserve(element);
    };
  };
  onCleanup(() => {
    resizeObserver?.disconnect();
    resizeObserver = null;
    tabResizeObserverElements.clear();
  });

  // Observe the list element itself (for indicator-on-resize hooks).
  const attachListObserver = el => {
    if (!el) return;
    ensureObserver()?.observe(el);
  };
  const onTabActivation = (newValue, eventDetails) => {
    if (newValue !== rootContext.value()) {
      rootContext.onValueChange(newValue, eventDetails);
    }
  };
  const composite = useCompositeRoot({
    get orientation() {
      return rootContext.orientation();
    },
    get loopFocus() {
      return loopFocus();
    },
    direction,
    enableHomeAndEndKeys: true
  });
  const compositeRootContext = {
    highlightedIndex: composite.highlightedIndex,
    onHighlightedIndexChange: composite.onHighlightedIndexChange,
    highlightItemOnHover: () => false,
    relayKeyboardEvent: composite.relayKeyboardEvent,
    present: true
  };
  const tabsListContextValue = {
    activateOnFocus,
    highlightedTabIndex: composite.highlightedIndex,
    registerTabResizeObserverElement,
    onTabActivation,
    setHighlightedTabIndex: composite.onHighlightedIndexChange,
    tabsListElement,
    present: true
  };
  const userClassStyle = resolveClassStyle(props, () => ({
    orientation: rootContext.orientation(),
    tabActivationDirection: rootContext.tabActivationDirection()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "activateOnFocus", "children", "loopFocus");
  const internalProps = {
    ref: el => {
      setTabsListElement(el);
      composite.rootRef(el);
      attachListObserver(el);
    },
    role: "tablist",
    get "aria-orientation"() {
      return rootContext.orientation() === "vertical" ? "vertical" : undefined;
    },
    get "data-orientation"() {
      return rootContext.orientation();
    },
    get "data-activation-direction"() {
      return rootContext.tabActivationDirection();
    }
  };
  const merged = mergeRootProps(mergeRootProps(mergeRootProps(internalProps, composite.props), userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged}>
			<TabsListContext value={tabsListContextValue}>
				<CompositeRootContext value={compositeRootContext}>
					<CompositeList elementsRef={composite.elementsRef} onMapChange={map => {
          rootContext.setTabMap(map);
          composite.onMapChange(map);
        }}>
						{props.children}
					</CompositeList>
				</CompositeRootContext>
			</TabsListContext>
		</Tag>;
}
//# sourceMappingURL=tabs-list.jsx.map