import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { usePostMessageAPIListener } from "../../../common/postMessage.js";
import { Panels } from "../../components/Panels/Panels.js";
import { Sidebar } from "../../components/Sidebar/Sidebar.js";
import BigOverlay from "../BigOverlay/BigOverlay.js";
import MiddleScreen from "../MiddleScreen/MiddleScreen.js";
import { MainEditorStoreProvider } from "../../context/editorStore/index.js";
import { IframeProvider } from "../../context/iframeContext/index.js";
import { useEditorTabs } from "../../hooks/useEditorTabs.js";
import useMainEditorInitialize from "../../hooks/useMainEditorInitialize.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import Source from "../Source/Source.js";
import ViewSwitches from "../ViewSwitches/ViewSwitches.js";
import './Editor.css';
const b = editorCn('editor');
const EditorViewInternal = ({ slots = {}, content }) => {
    const store = useMainEditorStore();
    const { manipulateOverlayMode, disableMode, undo, redo } = store;
    useMainEditorInitialize(content);
    usePostMessageAPIListener('ON_EDITOR_UNDO', () => {
        undo();
    }, [undo]);
    usePostMessageAPIListener('ON_EDITOR_REDO', () => {
        redo();
    }, [redo]);
    React.useEffect(() => {
        const onKeyDown = (e) => {
            if (!(e.metaKey || e.ctrlKey)) {
                return;
            }
            if (e.key.toLowerCase() !== 'z') {
                return;
            }
            const target = e.target;
            if (target?.closest('input, textarea, select, [contenteditable="true"]')) {
                return;
            }
            e.preventDefault();
            if (e.shiftKey) {
                redo();
            }
            else {
                undo();
            }
        };
        window.addEventListener('keydown', onKeyDown, true);
        return () => window.removeEventListener('keydown', onKeyDown, true);
    }, [redo, undo]);
    // Disable insert mode on any MouseUp event
    // Maybe should be attached to body
    const onMouseUp = React.useCallback((e) => {
        if (manipulateOverlayMode) {
            e.preventDefault();
            disableMode();
        }
    }, [disableMode, manipulateOverlayMode]);
    const { left, right } = useEditorTabs(slots);
    return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    _jsxs("div", { className: b(), onMouseUp: onMouseUp, children: [_jsx("div", { className: b('body'), children: _jsx(Panels, { left: _jsx(Sidebar, { tabs: left, top: slots.leftTop }), right: _jsx(Sidebar, { tabs: right, top: [...(slots.rightTop || []), Source, ViewSwitches], defaultTab: "block-config" }), middle: _jsx(MiddleScreen, { CustomTop: slots.middleTop }) }) }), _jsx(BigOverlay, { className: b('overlay') })] }));
};
export const EditorProvider = ({ initialUrl, disableUrlField, children }) => {
    return (_jsx(IframeProvider, { initialUrl: initialUrl, disableUrlField: disableUrlField, children: _jsx(MainEditorStoreProvider, { children: children }) }));
};
export const EditorView = (props) => _jsx(EditorViewInternal, { ...props });
export const Editor = (props) => {
    return (_jsx(EditorProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: _jsx(EditorView, { ...props }) }));
};
//# sourceMappingURL=Editor.js.map
