import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
import { createPythonEditorURL, PythonEditorFrameDriver, } from '../vanilla/python-editor-frame-driver.js';
const testSelector = 'python-editor-frame';
const styles = {
    editor: {
        display: 'flex',
        flexDirection: 'column',
    },
    iframe: {
        width: '100%',
        flexGrow: 1,
        border: 'none',
    },
};
const PythonEditorFrame = forwardRef(function PythonEditor(props, ref) {
    const { lang, version = '3', controller = 1, controllerId, style, queryParams, initialProjects, onWorkspaceLoaded, onWorkspaceSave, onWorkspaceSync, } = props;
    const src = createPythonEditorURL(version, lang, controller, queryParams);
    const options = useMemo(() => ({
        initialProjects,
        controllerId,
        onWorkspaceLoaded,
        onWorkspaceSave,
        onWorkspaceSync,
    }), [
        controllerId,
        initialProjects,
        onWorkspaceLoaded,
        onWorkspaceSave,
        onWorkspaceSync,
    ]);
    return (_jsx("div", { style: { ...styles.editor, ...style }, children: _jsx(PythonEditorFrameInner, { options: options, ref: ref, "data-testid": testSelector, title: "Python editor", src: src, style: styles.iframe, allow: "usb; clipboard-read; clipboard-write" }) }));
});
const PythonEditorFrameInner = forwardRef(function PythonEditorFrameInner(props, ref) {
    const { options, style, ...rest } = props;
    const iframeRef = useRef(null);
    // We keep a fixed driver (which has state for messages) and update its options as needed.
    const driverRef = useRef(new PythonEditorFrameDriver(options, () => iframeRef.current ?? undefined));
    useEffect(() => {
        const driver = driverRef.current;
        driver.initialize();
        return () => {
            driver.dispose();
        };
    }, []);
    useEffect(() => {
        driverRef.current.setOptions(options);
    }, [options]);
    useImperativeHandle(ref, () => driverRef.current, []);
    return (_jsx("iframe", { ref: iframeRef, title: "PythonEditor", style: { ...styles.iframe, ...style }, allow: "usb; autoplay; camera; microphone;", ...rest }));
});
export default PythonEditorFrame;
//# sourceMappingURL=PythonEditorFrame.js.map