import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Xmark } from '@gravity-ui/icons';
import { ActionTooltip, Button, Icon, Loader } from '@gravity-ui/uikit';
import { usePostMessageAPIListener } from "../../../common/postMessage.js";
import { IframeContext } from "../../context/iframeContext/index.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import Overlay from "../Overlay/Overlay.js";
import './MiddleScreen.css';
const b = editorCn('middle-screen');
// the maximum height of the iframe
const IFRAME_MAX_HEIGHT = 50000;
const MiddleScreen = ({ className, CustomTop }) => {
    const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = useMainEditorStore();
    const { url, setIframeElement } = React.useContext(IframeContext);
    const [canvasRef, setCanvasRef] = React.useState(null);
    const [height, setHeight] = React.useState(0);
    const canvasStyle = React.useMemo(() => ({
        transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
        height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
        width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
        maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
    }), [isPreviewMode, zoom]);
    const onResize = React.useCallback((newHeight) => {
        const settedHeight = newHeight + 100;
        setHeight(settedHeight > IFRAME_MAX_HEIGHT ? IFRAME_MAX_HEIGHT : settedHeight);
    }, [setHeight]);
    usePostMessageAPIListener('ON_RESIZE', ({ height: newHeight }) => {
        onResize(newHeight);
    });
    usePostMessageAPIListener('ON_INIT', ({ height: newHeight }) => {
        onResize(newHeight);
    });
    const isWithBackground = React.useMemo(() => {
        return deviceWidth !== '100%';
    }, [deviceWidth]);
    React.useEffect(() => {
        const handleKeyDown = (e) => {
            if (isPreviewMode && e.key === 'Escape')
                togglePreviewMode();
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [isPreviewMode, togglePreviewMode]);
    return (_jsxs("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? (_jsx("div", { className: b('topbar'), children: _jsx(CustomTop, {}) })) : null, _jsx("div", { className: b('content', { fullscreen: isPreviewMode }), children: _jsx("div", { className: b('wrapper'), children: _jsxs("div", { ref: setCanvasRef, className: b('canvas', {
                            hidden: !initialized,
                            fullscreen: isPreviewMode,
                            withBackground: isWithBackground,
                        }), style: canvasStyle, children: [_jsxs("div", { className: b('iframe-container', { fullscreen: isPreviewMode }), style: { width: isPreviewMode ? '100%' : deviceWidth }, children: [_jsx("iframe", { ref: (instance) => {
                                            if (instance) {
                                                setIframeElement(instance);
                                            }
                                        }, className: b('iframe', { fullscreen: isPreviewMode }), src: url, height: isPreviewMode ? '100%' : `${height}px`, width: isPreviewMode ? '100%' : deviceWidth, frameBorder: "0", title: "Page Constructor Iframe" }), !isPreviewMode && (_jsx(Overlay, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && (_jsx("div", { className: b('exit-preview-container'), children: _jsx(ActionTooltip, { title: "Exit preview mode", placement: "left", hotkey: "Escape", children: _jsx(Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "m", children: _jsx(Icon, { size: 20, data: Xmark }) }) }) })), !initialized && (_jsx("div", { className: b('loading'), children: _jsx(Loader, { size: 'l' }) }))] }) }) })] }));
};
export default MiddleScreen;
//# sourceMappingURL=MiddleScreen.js.map
