"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageConstructor = exports.Constructor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
require("@diplodoc/transform/dist/js/yfm");
const uikit_1 = require("@gravity-ui/uikit");
const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia.js"));
const BrandFooter_1 = tslib_1.__importDefault(require("../../components/BrandFooter/BrandFooter.js"));
const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn/index.js"));
const constructor_items_1 = require("../../constructor-items.js");
const animateContext_1 = require("../../context/animateContext/index.js");
const innerContext_1 = require("../../context/innerContext/index.js");
const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
const theme_1 = require("../../context/theme/index.js");
const usePCEditorInitializeEvents_1 = require("../../hooks/usePCEditorInitializeEvents.js");
const usePCEditorStore_1 = require("../../hooks/usePCEditorStore.js");
const models_1 = require("../../models/index.js");
const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout.js"));
const utils_1 = require("../../utils/index.js");
const components_1 = require("./components/index.js");
const ConstructorRow_1 = require("./components/ConstructorRow/index.js");
const b = (0, utils_1.block)('page-constructor');
const Constructor = (props) => {
    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
    const [content, setContent] = React.useState({
        blocks,
        background,
        navigation,
    });
    const theme = (0, theme_1.useTheme)();
    const store = (0, usePCEditorStore_1.usePCEditorStore)();
    const { initialized, isPreviewMode } = store;
    (0, usePCEditorInitializeEvents_1.usePCEditorInitializeEvents)({ initialContent: { blocks, background, navigation }, setContent });
    const { context } = React.useMemo(() => ({
        context: {
            blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
            subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomTypes)(['subBlocks'], custom)],
            headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomTypes)(['headers'], custom)],
            navigationBlockTypes: [
                ...models_1.NavigationItemTypes,
                ...(0, utils_1.getCustomTypes)(['navigation'], custom),
            ],
            itemMap: {
                ...constructor_items_1.blockMap,
                ...constructor_items_1.subBlockMap,
                ...(0, utils_1.getCustomItems)(['blocks', 'headers', 'subBlocks'], custom),
            },
            navItemMap: {
                ...constructor_items_1.navItemMap,
                ...(0, utils_1.getCustomItems)(['navigation'], custom),
            },
            loadables: custom?.loadable,
            shouldRenderBlock,
            customization: {
                decorators: custom?.decorators,
            },
            microdata,
        },
    }), [custom, shouldRenderBlock, microdata]);
    const restBlocks = content.blocks;
    const themedBackground = (0, utils_1.getThemedValue)(content.background, theme);
    // disable click events
    React.useEffect(() => {
        if (!initialized || isPreviewMode) {
            return;
        }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const handler = (e) => {
            e?.preventDefault();
            const blockElement = e.target.closest('[data-editor-item]');
            blockElement.click(e);
        };
        document.body.addEventListener('click', handler);
        // eslint-disable-next-line consistent-return
        return () => {
            document.body.removeEventListener('click', handler);
        };
    }, [initialized, isPreviewMode]);
    return ((0, jsx_runtime_1.jsx)(innerContext_1.InnerContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(RootCn_1.default, { className: b('', { ['with-editor']: initialized }), children: (0, jsx_runtime_1.jsxs)("div", { className: b('wrapper'), children: [themedBackground && ((0, jsx_runtime_1.jsx)(BackgroundMedia_1.default, { ...themedBackground, className: b('background') })), (0, jsx_runtime_1.jsxs)(Layout_1.default, { navigation: content.navigation, children: [renderMenu && renderMenu(), restBlocks && ((0, jsx_runtime_1.jsx)(ConstructorRow_1.ConstructorRow, { children: (0, jsx_runtime_1.jsx)(components_1.ConstructorBlocks, { items: restBlocks }) }))] }), isBranded && (0, jsx_runtime_1.jsx)(BrandFooter_1.default, {})] }) }) }));
};
exports.Constructor = Constructor;
const PageConstructor = (props) => {
    const { isAnimationEnabled = true } = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
    const { content: { animated = isAnimationEnabled } = {}, ...rest } = props;
    return ((0, jsx_runtime_1.jsx)(uikit_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(animateContext_1.AnimateContext.Provider, { value: { animated }, children: (0, jsx_runtime_1.jsx)(exports.Constructor, { content: props.content, ...rest }) }) }));
};
exports.PageConstructor = PageConstructor;
//# sourceMappingURL=PageConstructor.js.map
