"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const postMessage_1 = require("../../../common/postMessage.js");
const iframeContext_1 = require("../../context/iframeContext/index.js");
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const Overlay_1 = tslib_1.__importDefault(require("../Overlay/Overlay.js"));
const b = (0, cn_1.editorCn)('middle-screen');
// the maximum height of the iframe
const IFRAME_MAX_HEIGHT = 50000;
const MiddleScreen = ({ className, CustomTop }) => {
    const { zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode } = (0, useMainEditorStore_1.useMainEditorStore)();
    const { url, setIframeElement } = React.useContext(iframeContext_1.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]);
    (0, postMessage_1.usePostMessageAPIListener)('ON_RESIZE', ({ height: newHeight }) => {
        onResize(newHeight);
    });
    (0, postMessage_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [CustomTop && !isPreviewMode ? ((0, jsx_runtime_1.jsx)("div", { className: b('topbar'), children: (0, jsx_runtime_1.jsx)(CustomTop, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { className: b('content', { fullscreen: isPreviewMode }), children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { ref: setCanvasRef, className: b('canvas', {
                            hidden: !initialized,
                            fullscreen: isPreviewMode,
                            withBackground: isWithBackground,
                        }), style: canvasStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('iframe-container', { fullscreen: isPreviewMode }), style: { width: isPreviewMode ? '100%' : deviceWidth }, children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(Overlay_1.default, { className: b('overlay'), canvasElement: canvasRef }))] }), isPreviewMode && ((0, jsx_runtime_1.jsx)("div", { className: b('exit-preview-container'), children: (0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { title: "Exit preview mode", placement: "left", hotkey: "Escape", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "action", className: b('exit-preview'), onClick: togglePreviewMode, "aria-label": "Exit preview mode", title: "Exit preview mode", size: "m", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { size: 20, data: icons_1.Xmark }) }) }) })), !initialized && ((0, jsx_runtime_1.jsx)("div", { className: b('loading'), children: (0, jsx_runtime_1.jsx)(uikit_1.Loader, { size: 'l' }) }))] }) }) })] }));
};
exports.default = MiddleScreen;
//# sourceMappingURL=MiddleScreen.js.map
