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

export function GuideSpotlight({
	children,
	onFinish,
	onSkip,
	container = getAppPortalRoot,
	viewport,
	...props
}: GuideSpotlightProps) {
	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>
	);
}