"use client";
import { usePlayer } from "../../player/context.js";
import { renderElement } from "../../utils/use-render.js";
import { ControlsContextProvider } from "./context.js";
import { logMissingFeature, selectControls } from "@videojs/core/dom";
import { forwardRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
//#region src/ui/controls/controls-root.tsx
/** Root container for player controls state and rendered control content. */
const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
	const { render, className, style, children, ...elementProps } = componentProps;
	const controls = usePlayer(selectControls);
	const [core] = useState(() => new ControlsCore());
	if (!controls) {
		logMissingFeature("Controls.Root", "controls");
		return null;
	}
	core.setMedia(controls);
	const state = core.getState();
	return /* @__PURE__ */ jsx(ControlsContextProvider, {
		value: {
			state,
			stateAttrMap: ControlsDataAttrs
		},
		children: renderElement("div", {
			render,
			className,
			style
		}, {
			state,
			stateAttrMap: ControlsDataAttrs,
			ref: [forwardedRef],
			props: [
				{ children },
				elementProps,
				{ "data-interactive": "" }
			]
		})
	});
});
//#endregion
export { ControlsRoot };

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