import { css } from "@emotion/css";
import { PicoCart, PicoPlayerHandle, makePicoConsole } from "./renderCart";
import { ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";

type Pico8ConsoleImperatives = {
	getPicoConsoleHandle(): PicoPlayerHandle | null;
}

export const Pico8Console = forwardRef((props: { carts: PicoCart[] }, forwardedRef: ForwardedRef<Pico8ConsoleImperatives>) => {
	const {carts} = props;
	const ref = useRef<HTMLDivElement>(null);
	const [handle, setHandle] = useState<PicoPlayerHandle | null>(null);
	const attachConsole = useCallback(async () => {
		const picoConsole = await makePicoConsole({
			carts,
		});
		if (ref.current) {
			ref.current.appendChild(picoConsole.canvas);
		}
		setHandle(picoConsole);
	}, [carts]);
	useImperativeHandle(forwardedRef, () => ({
		getPicoConsoleHandle() {
			return handle;
		}
	}), [handle]);
	useEffect(() => {
		attachConsole();
	}, [attachConsole]);
	return (
		<div ref={ref} className={css`
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			& > canvas {
				width: 100%;
				height: 100%;
			}
		`}></div>
	);
});