import { loadImageData } from "@common/display/canvas";
import type { HTMLAttributes } from "preact/compat";
import { useEffect, useMemo, useRef } from "preact/hooks";

interface Props extends HTMLAttributes<HTMLCanvasElement> {
    dataView: DataView;
    pointer: number;
}

export const PointerCanvas = ({ dataView, pointer, ...otherProps }: Props) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const ctx = useMemo(() => canvasRef.current?.getContext('2d'), [canvasRef.current]);

    const imageData = useMemo(() => loadImageData(dataView, pointer), [dataView, pointer]);

    useEffect(() => {
        if (canvasRef.current) {
            canvasRef.current.width = imageData.width;
            canvasRef.current.height = imageData.height;
        }
    }, [imageData, canvasRef.current]);

    useEffect(() => {
        let raf: number;
        const frame = () => {
            if (ctx) {
                ctx.putImageData(imageData, 0, 0);
            }
            raf = requestAnimationFrame(frame);
        }
        raf = requestAnimationFrame(frame);

        return () => {
            cancelAnimationFrame(raf);
        };
    }, [ctx, imageData]);

    return <>
        <canvas ref={canvasRef} {...otherProps} />
    </>;
};