"use client";
import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
import { useLatestRef } from "../../utils/use-latest-ref.js";
import { useDestroy } from "../../utils/use-destroy.js";
import { useSafeId } from "../../utils/use-safe-id.js";
import { useOptionalControlsContext } from "../controls/context.js";
import { usePositionedState } from "../hooks/use-positioned-state.js";
import { PopoverContextProvider } from "./context.js";
import { createPopover, createTransition } from "@videojs/core/dom";
import { useSnapshot } from "@videojs/store/react";
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { isUndefined } from "@videojs/utils/predicate";
import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
//#region src/ui/popover/popover-root.tsx
function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, boundary = "container", children, ...coreProps }) {
	const container = useOptionalContainer();
	const popupGroup = useOptionalPopupGroup();
	const controls = useOptionalControlsContext();
	const [core] = useState(() => new PopoverCore(coreProps));
	core.setProps(coreProps);
	const isControlled = !isUndefined(controlledOpen);
	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
	const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);
	const openOnHoverRef = useLatestRef(openOnHover);
	const delayRef = useLatestRef(delay);
	const closeDelayRef = useLatestRef(closeDelay);
	const popupGroupRef = useLatestRef(popupGroup);
	const [popover] = useState(() => {
		const instance = createPopover({
			transition: createTransition(),
			onOpenChange: (nextOpen, details) => {
				onOpenChangeRef.current?.(nextOpen, details);
			},
			onOpenChangeComplete: (nextOpen) => {
				onOpenChangeCompleteRef.current?.(nextOpen);
			},
			closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,
			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
			openOnHover: () => openOnHoverRef.current,
			delay: () => delayRef.current,
			closeDelay: () => closeDelayRef.current,
			group: () => popupGroupRef.current
		});
		if (!isControlled && defaultOpen) instance.open("click");
		return instance;
	});
	const anchorName = useSafeId();
	const popupId = useSafeId("popup");
	useEffect(() => {
		if (isUndefined(controlledOpen)) return;
		const { active: inputOpen } = popover.input.current;
		if (controlledOpen === inputOpen) return;
		if (controlledOpen) popover.open("click");
		else popover.close("click");
	}, [controlledOpen, popover]);
	useEffect(() => {
		if (isUndefined(controls?.state.visible)) return;
		if (controls.state.visible) return;
		popover.close("imperative-action");
	}, [controls?.state.visible, popover]);
	useDestroy(popover);
	const input = useSnapshot(popover.input);
	core.setInput(input);
	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
	return /* @__PURE__ */ jsx(PopoverContextProvider, {
		value: {
			core,
			popover,
			state,
			preferredSide,
			setPositionedSide,
			stateAttrMap: PopoverDataAttrs,
			anchorName,
			popupId,
			boundary,
			container
		},
		children
	});
}
//#endregion
export { PopoverRoot };

//# sourceMappingURL=popover-root.js.map