import type { ComponentActions, ComponentState } from "../../hooks/useComponent";
import Canvas from "./canvas";
import { useEffect, useRef, useState } from "react";

interface EditorProps {
    componentState: ComponentState,
    componentAcionts: ComponentActions,
}

export default function Editor({
    componentState,
    componentAcionts,
}: EditorProps) {


    const editorRef = useRef<HTMLDivElement | null>(null);
    const [width, setWidth] = useState<number>(600);
    
    useEffect(() => {
        if (!editorRef.current) return;
        setWidth(editorRef.current.offsetWidth);
    }, [editorRef])
    
    return (
        <div className="h-full bg-gray-100">
            <Canvas
                componentState={componentState}
                canvasWidth={width}
                moveComponent={componentAcionts.moveComponent}
                selectComponent={componentAcionts.selectComponent}
                resetSelectingComponent={componentAcionts.resetSelectingComponent}
            />
        </div>
    );
}