"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const python_editor_frame_driver_js_1 = require("../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 = (0, react_1.forwardRef)(function PythonEditor(props, ref) {
    const { lang, version = '3', controller = 1, controllerId, style, queryParams, initialProjects, onWorkspaceLoaded, onWorkspaceSave, onWorkspaceSync, } = props;
    const src = (0, python_editor_frame_driver_js_1.createPythonEditorURL)(version, lang, controller, queryParams);
    const options = (0, react_1.useMemo)(() => ({
        initialProjects,
        controllerId,
        onWorkspaceLoaded,
        onWorkspaceSave,
        onWorkspaceSync,
    }), [
        controllerId,
        initialProjects,
        onWorkspaceLoaded,
        onWorkspaceSave,
        onWorkspaceSync,
    ]);
    return ((0, jsx_runtime_1.jsx)("div", { style: { ...styles.editor, ...style }, children: (0, jsx_runtime_1.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 = (0, react_1.forwardRef)(function PythonEditorFrameInner(props, ref) {
    const { options, style, ...rest } = props;
    const iframeRef = (0, react_1.useRef)(null);
    // We keep a fixed driver (which has state for messages) and update its options as needed.
    const driverRef = (0, react_1.useRef)(new python_editor_frame_driver_js_1.PythonEditorFrameDriver(options, () => iframeRef.current ?? undefined));
    (0, react_1.useEffect)(() => {
        const driver = driverRef.current;
        driver.initialize();
        return () => {
            driver.dispose();
        };
    }, []);
    (0, react_1.useEffect)(() => {
        driverRef.current.setOptions(options);
    }, [options]);
    (0, react_1.useImperativeHandle)(ref, () => driverRef.current, []);
    return ((0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, title: "PythonEditor", style: { ...styles.iframe, ...style }, allow: "usb; autoplay; camera; microphone;", ...rest }));
});
exports.default = PythonEditorFrame;
//# sourceMappingURL=PythonEditorFrame.js.map