import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useState, useEffect, useContext, } from 'react';
import { PlusOutlined, BorderInnerOutlined } from '@ant-design/icons';
import { throttle } from '../../../../../utils/throttle';
import { getSavedSelectedSceneId } from '../../../../../utils/get-saved-selected-scene-id';
import { getGridStep } from '../../../../../utils/grid';
import { EngineContext } from '../../../../providers';
import { EventType } from '../../../../../events';
import { useStore } from '../../../../hooks/use-store';
import { getGridSection } from './utils';
import { CanvasCoordinatesStyled, SectionStyled, IconsCSS } from './canvas-coordinates.style';
const DELAY = 50;
export const CanvasCoordinates = () => {
    const { world } = useContext(EngineContext);
    const store = useStore();
    const [isCursor, setIsCursor] = useState(false);
    const [isScene, setIsScene] = useState(Boolean(getSavedSelectedSceneId(store)));
    const [cursorX, setCursorX] = useState(0);
    const [cursorY, setCursorY] = useState(0);
    const [gridX, setGridX] = useState(0);
    const [gridY, setGridY] = useState(0);
    useEffect(() => {
        const updateCoordinates = throttle((x, y) => {
            const step = getGridStep(world);
            setCursorX(Math.round(x));
            setCursorY(Math.round(y));
            setGridX(getGridSection(x, step));
            setGridY(getGridSection(y, step));
        }, DELAY);
        const handleCursorMove = (event) => {
            updateCoordinates(event.x, event.y);
            setIsCursor(true);
        };
        const handleCursorLeave = () => {
            setIsCursor(false);
        };
        const handleSelectScene = (event) => {
            setIsScene(Boolean(event.sceneId));
        };
        world.addEventListener(EventType.SelectScene, handleSelectScene);
        world.addEventListener(EventType.ToolCursorMove, handleCursorMove);
        world.addEventListener(EventType.ToolCursorLeave, handleCursorLeave);
        return () => {
            world.removeEventListener(EventType.SelectScene, handleSelectScene);
            world.removeEventListener(EventType.ToolCursorMove, handleCursorMove);
            world.removeEventListener(EventType.ToolCursorLeave, handleCursorLeave);
        };
    }, []);
    if (!isCursor || !isScene) {
        return null;
    }
    return (_jsxs(CanvasCoordinatesStyled, { children: [_jsxs(SectionStyled, { children: [_jsx(PlusOutlined, { css: IconsCSS }), `${cursorX} ${cursorY}`] }), _jsxs(SectionStyled, { children: [_jsx(BorderInnerOutlined, { css: IconsCSS }), `${gridX} ${gridY}`] })] }));
};
