import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import '@diplodoc/transform/dist/js/yfm';
import { ThemeProvider } from '@gravity-ui/uikit';
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 { usePCEditorInitializeEvents } from "../../hooks/usePCEditorInitializeEvents.js";
import { usePCEditorStore } from "../../hooks/usePCEditorStore.js";
import { BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from "../../models/index.js";
import Layout from "../../navigation/containers/Layout/Layout.js";
import { block as cnBlock, getCustomItems, getCustomTypes, getThemedValue } from "../../utils/index.js";
import { ConstructorBlocks } from "./components/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 [content, setContent] = React.useState({
        blocks,
        background,
        navigation,
    });
    const theme = useTheme();
    const store = usePCEditorStore();
    const { initialized, isPreviewMode } = store;
    usePCEditorInitializeEvents({ initialContent: { blocks, background, navigation }, setContent });
    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 restBlocks = content.blocks;
    const themedBackground = 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 (_jsx(InnerContext.Provider, { value: context, children: _jsx(RootCn, { className: b('', { ['with-editor']: initialized }), children: _jsxs("div", { className: b('wrapper'), children: [themedBackground && (_jsx(BackgroundMedia, { ...themedBackground, className: b('background') })), _jsxs(Layout, { navigation: content.navigation, children: [renderMenu && renderMenu(), 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(ThemeProvider, { children: _jsx(AnimateContext.Provider, { value: { animated }, children: _jsx(Constructor, { content: props.content, ...rest }) }) }));
};
//# sourceMappingURL=PageConstructor.js.map
