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 { PREVIEW_FEATURE_NAME } from '../../consts';
import { EventType } from '../../../../../../../events';
export const PreviewFeature = ({ value }) => {
    const { t } = useTranslation();
    const { world } = useContext(EngineContext);
    const handleChange = useCallback((event) => {
        world.dispatchEvent(EventType.SetToolFeatureValue, {
            name: PREVIEW_FEATURE_NAME,
            value: event.target.checked,
        });
    }, [world]);
    return (_jsx(ToolFeature, { children: _jsx(Checkbox, { css: CheckboxCSS, checked: value, onChange: handleChange, children: t('toolbar.template.features.preview.title') }) }));
};
