"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Editor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
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 EditorView = ({ componentsConfig = {}, initialContent }) => {
    const store = (0, useMainEditorStore_1.useMainEditorStore)();
    const { manipulateOverlayMode, disableMode } = store;
    (0, useMainEditorInitialize_1.default)(initialContent);
    // 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)(componentsConfig);
    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: componentsConfig.leftTop }), right: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { tabs: right, top: [...(componentsConfig.rightTop || []), Source_1.default, ViewSwitches_1.default], defaultTab: "block-config" }), middle: (0, jsx_runtime_1.jsx)(MiddleScreen_1.default, { CustomTop: componentsConfig.middleTop }) }) }), (0, jsx_runtime_1.jsx)(BigOverlay_1.default, { className: b('overlay') })] }));
};
const Editor = (props) => {
    return ((0, jsx_runtime_1.jsx)(iframeContext_1.IframeProvider, { initialUrl: props.initialUrl, disableUrlField: props.disableUrlField, children: (0, jsx_runtime_1.jsx)(editorStore_1.MainEditorStoreProvider, { children: (0, jsx_runtime_1.jsx)(EditorView, { ...props }) }) }));
};
exports.Editor = Editor;
//# sourceMappingURL=Editor.js.map
