import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { Checkbox } from 'antd';
import { CheckboxCSS } from '../../toolbar.style';
import { ToolFeature } from '../tool-feature';
import { EngineContext } from '../../../../providers';
import { EventType } from '../../../../../events';
export const GRID_FEATURE_NAME = 'grid';
export const GridFeature = ({ value }) => {
    const { t } = useTranslation();
    const { world } = useContext(EngineContext);
    const handleChange = useCallback((event) => {
        world.dispatchEvent(EventType.SetToolFeatureValue, {
            name: GRID_FEATURE_NAME,
            value: event.target.checked,
        });
    }, [world]);
    return (_jsx(ToolFeature, { children: _jsx(Checkbox, { css: CheckboxCSS, checked: value, onChange: handleChange, children: t('toolbar.common.features.grid.title') }) }));
};
