"use client";

import { getToolbarSrc } from "@prismicio/client";
import { type FC, useEffect, useRef } from "react";

/** Props for `<PrismicToolbar>`. */
export type PrismicToolbarProps = {
	/**
	 * The name of the Prismic repository. For example, `"my-repo"` if the repository URL is
	 * `my-repo.prismic.io`.
	 */
	repositoryName: string;

	/**
	 * Called when the Prismic toolbar triggers a preview update. This happens when the previewed
	 * content changes.
	 *
	 * The new ref can be read from `event.detail.ref`.
	 *
	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
	 */
	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;

	/**
	 * Called when the Prismic toolbar triggers a preview end. This happens when a preview session is
	 * closed.
	 *
	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
	 */
	onPreviewEnd?: (event: CustomEvent<null>) => void;
};

/**
 * Renders the Prismic Toolbar script to support draft previews.
 *
 * @example
 * 	```tsx
 * 	<PrismicToolbar repositoryName="my-repo" />;
 * 	```
 *
 * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
 */
export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props;

	const src = getToolbarSrc(repositoryName);

	const onPreviewUpdateRef = useRef(onPreviewUpdate);
	onPreviewUpdateRef.current = onPreviewUpdate;

	const onPreviewEndRef = useRef(onPreviewEnd);
	onPreviewEndRef.current = onPreviewEnd;

	useEffect(() => {
		const existingScript = document.querySelector(`script[src="${src}"]`);

		if (!existingScript) {
			const script = document.createElement("script");
			script.src = src;
			script.defer = true;

			// Used to distinguish the toolbar element from other elements.
			script.dataset.prismicToolbar = "";
			script.dataset.repositoryName = repositoryName;

			// Disable Happy DOM `<script>` evaluation during tests.
			// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.
			script._evaluateScript = false;

			document.body.appendChild(script);
		}
	}, [repositoryName, src]);

	useEffect(() => {
		const controller = new AbortController();

		window.addEventListener(
			"prismicPreviewUpdate",
			(event) => onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
			{ signal: controller.signal },
		);

		window.addEventListener(
			"prismicPreviewEnd",
			(event) => onPreviewEndRef.current?.(event as CustomEvent<null>),
			{ signal: controller.signal },
		);

		return () => controller.abort();
	}, []);

	return null;
};