import { dynamic } from "@solidjs/web";
import { createRenderEffect, omit, Show } from "solid-js";
import { createMountTransition } from "../../internals/use-mount-transition/use-mount-transition.jsx";
import { useCollapsible } from "../create-collapsible.jsx";

/**
 * Props for {@link CollapsiblePanel}.
 *
 * Stage-01c rewire: this wrapper is now a structural adapter over
 * `useCollapsible()` + `createMountTransition` (axes A + G + P). `render={}`
 * is gone — use `as=` to swap the underlying tag/component.
 */

/**
 * The collapsible panel. Renders a `<div>` element (or `as` override).
 *
 * Solid 2 notes:
 *
 * - Reads the collapsible API via `useCollapsible()` — works both under
 *   `<Collapsible.Root>` and inside accordion items (both provide the new
 *   `CollapsibleContext`).
 * - `createMountTransition` owns the full animation lifecycle (mount state,
 *   enter/exit measurement, CSS vars, `beforematch` listener, `hidden` attr).
 * - The panel id is registered into `c.setPanelId()` at setup, so the trigger's
 *   `aria-controls` binding reflects the correct id.
 *
 * ### `c.panel()` shape decision — option (b)
 *
 * `c.panel()` still emits `hidden`, `style`, and `ref` (the full slot bag).
 * `m.mergePanelProps(userProps)` spreads AFTER `c.panel()`, so
 * `createMountTransition`'s `hidden`, `style`, and `ref` win on collision.
 * This keeps inline-headless working (`<div {...c.panel()}>`) without requiring
 * callers to compose `createMountTransition` separately. The cost is that
 * `c.panel()` emits keys that become unreachable when this wrapper is used —
 * those keys are dormant rather than harmful.
 *
 * Clean-up option (a) (slim `c.panel()` to drop lifecycle keys) is left for a
 * later stage when inline-headless ergonomics have been confirmed across all
 * compounds.
 */
export function CollapsiblePanel(props) {
  const c = useCollapsible();

  // The panel renders with the SHARED `c.panelId()` (seeded with the
  // primitive's `createUniqueId()` fallback) — the SAME value the trigger
  // reads for `aria-controls`. This keeps trigger↔panel linked even under SSR,
  // where the trigger serializes before the panel runs (matches React, which
  // renders the panel with the context `panelId` and only registers an
  // explicit `id` prop via effect). An explicit `id` prop is registered into
  // the shared signal so it takes effect once the write propagates
  // (client-side / post-hydration).
  createRenderEffect(() => typeof props.id === "string" ? props.id : undefined, idProp => {
    if (!idProp) return undefined;
    c.setPanelId(idProp);
    return undefined;
  });
  const m = createMountTransition(c.open, {
    keepMounted: () => Boolean(props.keepMounted),
    hiddenUntilFound: () => Boolean(props.hiddenUntilFound),
    onBeforematch: event => {
      c.setOpen(true, event);
    }
  });

  // Strip our config keys before passing user props into the slot.
  // `id` is stripped so it doesn't collide with the explicit id prop below.
  const userProps = omit(props, "as", "hiddenUntilFound", "id", "keepMounted");

  // Animation-state data attrs come from the local `createMountTransition`
  // — the primitive's `c.panel()` no longer carries them (stage-01c
  // cleanup chain).
  const lifecycleAttrs = {
    get "data-starting-style"() {
      return m.transitionStatus() === "starting" ? "" : undefined;
    },
    get "data-ending-style"() {
      return m.transitionStatus() === "ending" ? "" : undefined;
    }
  };

  // Bind the merged slot bag to a `const` BEFORE the JSX spread — hydration-
  // critical. Spreading an inline call (`{...c.panel(m.mergePanelProps(...))}`)
  // makes the Solid SSR compiler wrap it in a lazy thunk, whose server-side
  // `dynamic()` element resolution diverges from the client's child-id allocation and
  // throws "Hydration Mismatch". A pre-bound variable spread (`{...panelProps}`)
  // is passed straight through. See `collapsible-root.tsx` for the full
  // explanation and `<Tabs.Panel>` for the same `const merged` shape.
  const panelProps = c.panel(m.mergePanelProps(userProps));
  const Tag = dynamic(() => props.as ?? "div");
  return <Show when={m.shouldRender()}>
			<Tag {...panelProps} {...lifecycleAttrs} id={c.panelId()} />
		</Show>;
}
//# sourceMappingURL=collapsible-panel.jsx.map