"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const React = tslib_1.__importStar(require("react"));
const lodash_1 = tslib_1.__importDefault(require("lodash"));
const postMessage_1 = require("../../../common/postMessage.js");
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('overlay');
const Overlay = ({ className, canvasElement }) => {
    const { height, selectedBlock, setSelectedBlock, deleteBlock, duplicateBlock, manipulateOverlayMode, reorderBlock, } = (0, useMainEditorStore_1.useMainEditorStore)();
    const [insertLineBox, setInsertLineBox] = React.useState(undefined);
    const [hoverBorders, setHoverBorders] = React.useState(null);
    const [blockBorders, setBlockBorders] = React.useState(null);
    // Listen for updates to the selected block's position
    (0, postMessage_1.usePostMessageAPIListener)('ON_UPDATE_BLOCK_SELECTION', ({ rect }) => {
        setBlockBorders(selectedBlock && rect ? rect : null);
    }, [selectedBlock]);
    // Update blockBorders when selectedBlock changes
    React.useEffect(() => {
        if (!selectedBlock) {
            setBlockBorders(null);
        }
    }, [selectedBlock]);
    // Auto scroll to the selected block when blockBorders changes
    React.useEffect(() => {
        if (blockBorders && canvasElement) {
            // Calculate the scroll position to center the block in the viewport
            const canvasHeight = canvasElement.clientHeight;
            const scrollPosition = blockBorders.top - canvasHeight / 2 + blockBorders.height / 2;
            // Scroll the canvas element to the calculated position with smooth behavior
            canvasElement.scrollTo({
                top: Math.max(0, scrollPosition),
                behavior: 'smooth',
            });
        }
    }, [blockBorders, canvasElement]);
    const margin = 0;
    (0, postMessage_1.usePostMessageAPIListener)('ON_HOVER_BLOCK', ({ rect, position }) => {
        setHoverBorders(rect || null);
        if (rect && position) {
            setInsertLineBox({
                left: rect.x,
                top: rect.y,
                height: rect.height,
                width: rect.width,
                position: position,
            });
        }
    });
    (0, postMessage_1.usePostMessageAPIListener)('ON_CLICK_BLOCK', ({ path }) => {
        if (!selectedBlock && path) {
            setSelectedBlock(path);
        }
        else if (selectedBlock && lodash_1.default.isEqual(selectedBlock, path)) {
            setSelectedBlock(null);
            setBlockBorders(null);
        }
        else {
            setSelectedBlock(path);
        }
    }, [selectedBlock]);
    const handleMoveUp = () => {
        if (!selectedBlock)
            return;
        const destination = [...selectedBlock];
        destination[destination.length - 1] = destination[destination.length - 1] - 1;
        reorderBlock(selectedBlock, destination, 'prepend');
    };
    const handleMoveDown = () => {
        if (!selectedBlock)
            return;
        const destination = [...selectedBlock];
        destination[destination.length - 1] = destination[destination.length - 1] + 1;
        reorderBlock(selectedBlock, destination, 'append');
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: { height: `${height}px` }, children: [blockBorders ? ((0, jsx_runtime_1.jsx)("div", { className: b('border'), style: {
                    top: blockBorders.top - margin,
                    left: blockBorders.left - margin,
                    width: blockBorders.width + margin * 2,
                    height: blockBorders.height + margin * 2,
                }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-icon'), data: icons_1.ChevronUp, size: 18 }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('actions-box', { main: true }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 18 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 18 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: b('actions-box', { reorder: true }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('reorder-icon'), data: icons_1.ChevronDown, size: 18 }) }) })] }) })) : null, hoverBorders ? ((0, jsx_runtime_1.jsx)("div", { className: b('border', { hover: true }), style: {
                    top: hoverBorders.top - margin,
                    left: hoverBorders.left - margin,
                    width: hoverBorders.width + margin * 2,
                    height: hoverBorders.height + margin * 2,
                } })) : null, manipulateOverlayMode && hoverBorders && insertLineBox ? ((0, jsx_runtime_1.jsx)("div", { className: b('line', {
                    position: insertLineBox.position,
                }), style: {
                    top: hoverBorders.top,
                    left: hoverBorders.left,
                    width: hoverBorders.width,
                    height: hoverBorders.height,
                } })) : null] }));
};
exports.default = Overlay;
//# sourceMappingURL=Overlay.js.map
