import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown, ChevronUp, Copy, TrashBin } from '@gravity-ui/icons';
import { Button, Icon } from '@gravity-ui/uikit';
import * as React from 'react';
import _ from 'lodash';
import { usePostMessageAPIListener } from "../../../common/postMessage.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import './Overlay.css';
const b = editorCn('overlay');
const Overlay = ({ className, canvasElement }) => {
    const { height, selectedBlock, setSelectedBlock, deleteBlock, duplicateBlock, manipulateOverlayMode, reorderBlock, } = 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
    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;
    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,
            });
        }
    });
    usePostMessageAPIListener('ON_CLICK_BLOCK', ({ path }) => {
        if (!selectedBlock && path) {
            setSelectedBlock(path);
        }
        else if (selectedBlock && _.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 (_jsxs("div", { className: b(null, className), style: { height: `${height}px` }, children: [blockBorders ? (_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: _jsxs("div", { className: b('actions'), children: [_jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveUp, children: _jsx(Icon, { className: b('reorder-icon'), data: ChevronUp, size: 18 }) }) }), _jsxs("div", { className: b('actions-box', { main: true }), children: [_jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && duplicateBlock(selectedBlock), children: _jsx(Icon, { data: Copy, size: 18 }) }), _jsx(Button, { className: b('action-button'), size: 'm', view: 'action', onClick: () => selectedBlock && deleteBlock(selectedBlock), children: _jsx(Icon, { data: TrashBin, size: 18 }) })] }), _jsx("div", { className: b('actions-box', { reorder: true }), children: _jsx(Button, { view: "flat", size: 'm', onClick: handleMoveDown, children: _jsx(Icon, { className: b('reorder-icon'), data: ChevronDown, size: 18 }) }) })] }) })) : null, hoverBorders ? (_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 ? (_jsx("div", { className: b('line', {
                    position: insertLineBox.position,
                }), style: {
                    top: hoverBorders.top,
                    left: hoverBorders.left,
                    width: hoverBorders.width,
                    height: hoverBorders.height,
                } })) : null] }));
};
export default Overlay;
//# sourceMappingURL=Overlay.js.map
