import { createReactInlineContentSpec } from "@blocknote/react";
import type { MathfieldElement } from "mathlive";
import { useLayoutEffect, useRef } from "react";

declare global {
	namespace JSX {
		interface IntrinsicElements {
			"math-field": React.DetailedHTMLProps<
				React.HTMLAttributes<MathfieldElement>,
				MathfieldElement
			>;
		}
	}
}

export const InlineMath = createReactInlineContentSpec(
	{
		type: "inlineMath",
		propSchema: {
			latex: { default: "$1/2$" },
		},
		content: "none",
	},
	{
		render: ({ inlineContent, updateInlineContent, editor, contentRef }) => {
			const latex = inlineContent.props.latex ?? "";
			const ref = useRef<MathfieldElement>(null);

			useLayoutEffect(() => {
				ref.current?.addEventListener("move-out", (e) => {
					const pos = editor._tiptapEditor.view?.posAtDOM(ref.current as Node, 0);
					if (!pos) {
						console.log("No pos found");
						return;
					}
					if (e.detail.direction === "forward") {
						ref.current?.blur();
						editor._tiptapEditor.commands.focus((pos || 0) + 1);
					} else if (e.detail.direction === "backward") {
						ref.current?.blur();
						editor._tiptapEditor.commands.focus(pos || 0);
					}
				});
			}, []);

			return (
				<span ref={contentRef} className={"inline"}>
					<math-field
						ref={ref}
						onInput={(evt: React.ChangeEvent<HTMLElement>) => {
							const value = "value" in evt.target && (evt.target.value as string);
							updateInlineContent({
								type: "inlineMath",
								props: {
									latex: value || "",
								},
							});
						}}
					>
						{latex}
					</math-field>
				</span>
			);
		},
	},
);