import { EditorProvider } from "./Editor/EditorContext";
import { useEditorState } from "./Editor/useEditorState";
import { useEditorShortcuts } from "./Editor/useEditorShortcuts";
import EditorWorkspaceLayout from "./Editor/EditorWorkspaceLayout";
import ShareDialog from "../components/ShareDialog";

function EditorShortcuts({ videoRef }: { videoRef: React.RefObject<HTMLVideoElement> }) {
    useEditorShortcuts(videoRef);
    return null;
}

function EditorView() {
    const state = useEditorState();

    return (
        <EditorProvider value={state}>
            <EditorShortcuts videoRef={state.videoRef} />
            <EditorWorkspaceLayout videoRef={state.videoRef} />
            {state.sharing && state.sessionId && (
                <ShareDialog sessionId={state.sessionId} onClose={() => state.setSharing(false)} />
            )}
        </EditorProvider>
    );
}

export default EditorView;