import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import '@diplodoc/transform/dist/js/yfm.js';
import BackgroundMedia from "../../components/BackgroundMedia/BackgroundMedia.js";
import BrandFooter from "../../components/BrandFooter/BrandFooter.js";
import RootCn from "../../components/RootCn/index.js";
import { blockMap, navItemMap, subBlockMap } from "../../constructor-items.js";
import { AnimateContext } from "../../context/animateContext/index.js";
import { InnerContext } from "../../context/innerContext/index.js";
import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
import { useTheme } from "../../context/theme/index.js";
import { Grid } from "../../grid/index.js";
import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from "../../models/index.js";
import Layout from "../../navigation/containers/Layout/Layout.js";
import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from "../../utils/index.js";
import { ConstructorBlocks } from "./components/ConstructorBlocks/index.js";
import { ConstructorHeader } from "./components/ConstructorItem/index.js";
import { ConstructorRow } from "./components/ConstructorRow/index.js";
import './PageConstructor.css';
const b = cnBlock('page-constructor');
export const Constructor = (props) => {
    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
    const { context } = React.useMemo(() => ({
        context: {
            blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
            subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],
            headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],
            navigationBlockTypes: [
                ...NavigationItemTypes,
                ...getCustomTypes(['navigation'], custom),
            ],
            itemMap: {
                ...blockMap,
                ...subBlockMap,
                ...getCustomItems(['blocks', 'headers', 'subBlocks'], custom),
            },
            navItemMap: {
                ...navItemMap,
                ...getCustomItems(['navigation'], custom),
            },
            loadables: custom?.loadable,
            shouldRenderBlock,
            customization: {
                decorators: custom?.decorators,
            },
            microdata,
        },
    }), [custom, shouldRenderBlock, microdata]);
    const theme = useTheme();
    const header = getHeaderBlock(blocks, context.headerBlockTypes);
    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
    const themedBackground = getThemedValue(background, theme);
    return (_jsx(InnerContext.Provider, { value: context, children: _jsx(RootCn, { className: b(), children: _jsxs("div", { className: b('wrapper'), children: [themedBackground && (_jsx(BackgroundMedia, { ...themedBackground, className: b('background') })), _jsxs(Layout, { navigation: navigation, children: [renderMenu && renderMenu(), header && (_jsx(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })), _jsx(Grid, { children: restBlocks && (_jsx(ConstructorRow, { children: _jsx(ConstructorBlocks, { items: restBlocks }) })) })] }), isBranded && _jsx(BrandFooter, {})] }) }) }));
};
export const PageConstructor = (props) => {
    const { isAnimationEnabled = true } = React.useContext(ProjectSettingsContext);
    const { content: { animated = isAnimationEnabled } = {}, ...rest } = props;
    return (_jsx(AnimateContext.Provider, { value: { animated }, children: _jsx(Constructor, { content: props.content, ...rest }) }));
};
//# sourceMappingURL=PageConstructor.js.map
