import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, } from 'react';
import { EngineContext } from '../../../../providers';
import { EventType } from '../../../../../events';
import { StepField } from './step-field';
import { ColorField } from './color-field';
import { ShowGridField } from './show-grid-field';
import { GridSettingsStyled } from './grid.style';
export const Grid = ({ settings }) => {
    const { world } = useContext(EngineContext);
    const handleStepChange = useCallback((value) => {
        world.dispatchEvent(EventType.SetSettingsValue, {
            name: 'gridStep',
            value,
        });
    }, [world]);
    const handleColorChange = useCallback((value) => {
        world.dispatchEvent(EventType.SetSettingsValue, {
            name: 'gridColor',
            value,
        });
    }, [world]);
    const handleGridShowChange = useCallback((checked) => {
        world.dispatchEvent(EventType.SetSettingsValue, {
            name: 'showGrid',
            value: checked,
        });
    }, [world]);
    return (_jsxs(GridSettingsStyled, { children: [_jsx(StepField, { onChange: handleStepChange, value: settings.gridStep }), _jsx(ColorField, { onChange: handleColorChange, value: settings.gridColor }), _jsx(ShowGridField, { onChange: handleGridShowChange, value: settings.showGrid })] }));
};
