import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useState, useCallback, useContext, useEffect, } from 'react';
import { useTranslation } from 'react-i18next';
import { Radio } from 'antd';
import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ToolFeaturesStyled, RadioGroupCSS } from '../../toolbar.style';
import { EngineContext } from '../../../../providers';
import { EventType } from '../../../../../events';
export const ZoomFeatures = ({ features }) => {
    const { t } = useTranslation();
    const { world } = useContext(EngineContext);
    const [values, setValues] = useState({
        direction: '',
    });
    useEffect(() => {
        Object.keys(features).forEach((name) => {
            if (values[name] !== features[name]) {
                setValues(Object.assign(Object.assign({}, values), { [name]: features[name] }));
            }
        });
    }, [features]);
    const handleSelect = useCallback((event) => {
        world.dispatchEvent(EventType.SetToolFeatureValue, {
            name: event.target.name,
            value: event.target.value,
        });
    }, [world]);
    return (_jsx(ToolFeaturesStyled, { children: _jsxs(Radio.Group, { css: RadioGroupCSS, name: "direction", buttonStyle: "solid", size: "small", value: values.direction, onChange: handleSelect, children: [_jsx(Radio.Button, { value: "in", children: _jsx(ZoomInOutlined, { title: t('toolbar.zoom.features.direction.in.title') }) }), _jsx(Radio.Button, { value: "out", children: _jsx(ZoomOutOutlined, { title: t('toolbar.zoom.features.direction.out.title') }) })] }) }));
};
