import { dynamic } from "@solidjs/web";
import { createMemo, createRenderEffect, omit, Show, untrack } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { useOpenChangeComplete } from "../../internals/popups/use-open-change-complete.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useTransitionStatus } from "../../internals/use-transition-status/use-transition-status.jsx";
import { useTabsRootContext } from "../tabs-root-context.jsx";
/**
 * The content panel that renders when its matching `<Tabs.Tab>` is active.
 * Renders a `<div role="tabpanel">`.
 *
 * Solid 2 notes:
 *
 * - `<Show when={shouldRender}>` wraps the element when `keepMounted` is
 *   `false`. When `keepMounted` is `true`, the element stays in the DOM and
 *   switches between visible / `hidden` based on selection.
 * - The panel registers its DOM id with the root so the matching tab can
 *   project `aria-controls={panelId}`. Registration happens in a render
 *   effect keyed on `(hidden, keepMounted)` — matches React's
 *   `useIsoLayoutEffect`.
 */
export function TabsPanel(props) {
  const root = useTabsRootContext();

  // 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 open = createMemo(() => root.value() === props.value);
  const keepMounted = () => props.keepMounted ?? false;
  const {
    mounted,
    transitionStatus,
    setMounted
  } = useTransitionStatus(open);
  const hidden = () => !mounted();

  // Registration effect: whenever the panel would be reachable by a tab
  // (mounted OR keepMounted), publish its id. Un-register on cleanup so
  // stale ids don't linger.
  createRenderEffect(
  // `props.value` is snapshotted in compute — the apply scope is
  // strict-read, and a changed value must re-register anyway.
  () => ({
    isHidden: hidden(),
    isKept: keepMounted(),
    value: props.value
  }), ({
    isHidden,
    isKept,
    value: panelValue
  }) => {
    if (isHidden && !isKept) return;
    root.registerMountedTabPanel(panelValue, id);
    // Apply scope is unowned — `onCleanup` here would never fire
    // (`[NO_OWNER_CLEANUP]`). Returning a cleanup function from the
    // apply hooks into the effect's own teardown instead.
    return () => {
      root.unregisterMountedTabPanel(panelValue, id);
    };
  });

  // Defer unmount until CSS transitions / animations settle. `ref.current`
  // is populated by `panelRef` below. Matches React's
  // `useOpenChangeComplete({ open, ref, onComplete: () => setMounted(false) })`:
  // whenever `open` flips, wait for any in-flight animations on the panel,
  // then drop `mounted` to `false`. The hook is a no-op when there are no
  // animations, so the static case still closes synchronously (on the next
  // microtask).
  const panelElementRef = {
    current: null
  };
  useOpenChangeComplete({
    open,
    ref: panelElementRef,
    onComplete: () => {
      if (!open()) {
        setMounted(false);
      }
    }
  });
  const panelRef = el => {
    panelElementRef.current = el;
  };
  const userClassStyle = resolveClassStyle(props, () => ({
    orientation: root.orientation(),
    tabActivationDirection: root.tabActivationDirection(),
    hidden: hidden(),
    transitionStatus: transitionStatus()
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "children", "keepMounted", "value");
  const internalProps = {
    id,
    role: "tabpanel",
    ref: panelRef,
    get "aria-labelledby"() {
      return root.getTabIdByPanelValue(props.value) ?? "";
    },
    get tabIndex() {
      return open() ? 0 : -1;
    },
    get hidden() {
      return hidden() ? true : undefined;
    },
    get "data-orientation"() {
      return root.orientation();
    },
    get "data-activation-direction"() {
      return root.tabActivationDirection();
    },
    get "data-hidden"() {
      return hidden() ? "" : undefined;
    },
    get "data-starting-style"() {
      return transitionStatus() === "starting" ? "" : undefined;
    },
    get "data-ending-style"() {
      return transitionStatus() === "ending" ? "" : undefined;
    }
  };
  const merged = mergeRootProps(mergeRootProps(internalProps, userClassStyle), userHtmlProps);
  const shouldRender = () => keepMounted() || mounted();
  const Tag = dynamic(() => props.as ?? "div");
  return <Show when={shouldRender()}>
			<Tag {...merged}>{props.children}</Tag>
		</Show>;
}
//# sourceMappingURL=tabs-panel.jsx.map