import { useCallback } from "react";
import {
	type GuideSpotlightProps,
	GuideSpotlight as RegistryGuideSpotlight,
} from "@/components/course-interactions/guide-spotlight";
import { useCourseCanvas } from "@/course-runtime/canvas";
import { useSpotlightStore } from "@/stores";
import { getAppPortalRoot } from "../canvasPortal";

export function GuideSpotlight({
	children,
	onFinish,
	onSkip,
	container = getAppPortalRoot,
	viewport,
	...props
}: Omit<GuideSpotlightProps, "actions" | "state"> & {
	onFinish?: () => void;
	onSkip?: () => void;
}) {
	const {
		open,
		steps,
		current,
		nextStep,
		prevStep,
		finishSpotlight,
		skipSpotlight,
	} = useSpotlightStore();
	const { viewport: canvasViewport } = useCourseCanvas();

	const finish = useCallback(() => {
		finishSpotlight();
		onFinish?.();
	}, [finishSpotlight, onFinish]);

	const skip = useCallback(() => {
		skipSpotlight();
		onSkip?.();
	}, [onSkip, skipSpotlight]);

	return (
		<RegistryGuideSpotlight
			state={{
				open,
				steps,
				current,
			}}
			actions={{
				next: nextStep,
				prev: prevStep,
				skip,
				finish,
			}}
			container={container}
			viewport={viewport ?? canvasViewport}
			{...props}
		>
			{children}
		</RegistryGuideSpotlight>
	);
}