import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import { Select } from 'antd';
import { FeatureLabel } from '../../../feature-label';
import { ToolFeature } from '../../../tool-feature';
import { EngineContext } from '../../../../../../providers';
import { useConfig } from '../../../../../../hooks';
import { TEMPLATE_FEATURE_NAME } from '../../consts';
import { EventType } from '../../../../../../../events';
import { SelectCSS } from './template-feature.style';
export const TemplateFeature = ({ value }) => {
    const { t } = useTranslation();
    const { world } = useContext(EngineContext);
    const templates = useConfig('templates');
    const options = useMemo(() => templates.map((template) => ({
        label: template.name,
        value: template.id,
    })), [templates]);
    const handleChange = useCallback((selectedValue) => {
        world.dispatchEvent(EventType.SetToolFeatureValue, {
            name: TEMPLATE_FEATURE_NAME,
            value: selectedValue,
        });
    }, [world]);
    const handleFilter = useCallback((input, option) => option !== undefined
        && option.label.toLowerCase().includes(input.toLowerCase()), []);
    return (_jsx(ToolFeature, { children: _jsx(FeatureLabel, { title: t('toolbar.template.features.template.title'), children: _jsx(Select, { css: SelectCSS, size: "small", options: options, onChange: handleChange, value: value, disabled: templates.length === 0, showSearch: true, filterOption: handleFilter }) }) }));
};
