"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Editor = exports.EditorView = exports.EditorProvider = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const postMessage_1 = require("../../../common/postMessage.js");
const Panels_1 = require("../../components/Panels/Panels.js");
const Sidebar_1 = require("../../components/Sidebar/Sidebar.js");
const BigOverlay_1 = tslib_1.__importDefault(require("../BigOverlay/BigOverlay.js"));
const MiddleScreen_1 = tslib_1.__importDefault(require("../MiddleScreen/MiddleScreen.js"));
const editorStore_1 = require("../../context/editorStore/index.js");
const iframeContext_1 = require("../../context/iframeContext/index.js");
const useEditorTabs_1 = require("../../hooks/useEditorTabs.js");
const useMainEditorInitialize_1 = tslib_1.__importDefault(require("../../hooks/useMainEditorInitialize.js"));
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const Source_1 = tslib_1.__importDefault(require("../Source/Source.js"));
const ViewSwitches_1 = tslib_1.__importDefault(require("../ViewSwitches/ViewSwitches.js"));
const b = (0, cn_1.editorCn)('editor');
const EditorViewInternal = ({ slots = {}, content }) => {
    const store = (0, useMainEditorStore_1.useMainEditorStore)();
    const { manipulateOverlayMode, disableMode, undo, redo } = store;
    (0, useMainEditorInitialize_1.default)(content);
    (0, postMessage_1.usePostMessageAPIListener)('ON_EDITOR_UNDO', () => {
        undo();
    }, [undo]);
    (0, postMessage_1.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 } = (0, useEditorTabs_1.useEditorTabs)(slots);
    return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    (0, jsx_runtime_1.jsxs)("div", { className: b(), onMouseUp: onMouseUp, children: [(0, jsx_runtime_1.jsx)("div", { className: b('body'), children: (0, jsx_runtime_1.jsx)(Panels_1.Panels, { left: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: left, top: slots.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: [...(slots.rightTop || []), Source_1.default, ViewSwitches_1.default], defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: slots.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') })] }));
};
const EditorProvider = ({ initialUrl, disableUrlField, children }) => {
    return ((0, jsx_runtime_1.jsx)(iframeContext_1.IframeProvider, { initialUrl: initialUrl, disableUrlField: disableUrlField, children: (0, jsx_runtime_1.jsx)(editorStore_1.MainEditorStoreProvider, { children: children }) }));
};
exports.EditorProvider = EditorProvider;
const EditorView = (props) => (0, jsx_runtime_1.jsx)(EditorViewInternal, { ...props });
exports.EditorView = EditorView;
const Editor = (props) => {
    return ((0, jsx_runtime_1.jsx)(exports.EditorProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: (0, jsx_runtime_1.jsx)(exports.EditorView, { ...props }) }));
};
exports.Editor = Editor;
//# sourceMappingURL=Editor.js.map
