import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { Input, Button, Space } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { findPathById } from '../../../../../utils/find-path-by-id';
import { Labelled } from '../../components';
import { useConfig, useStore } from '../../../../hooks';
import { EngineContext } from '../../../../providers';
import { EventType } from '../../../../../events';
import { parseTemplatePath } from './utils';
import { SpaceCompactCSS, ButtonCSS } from './actor-form.style';
export const TemplateField = ({ path }) => {
    const { t } = useTranslation();
    const store = useStore();
    const { world } = useContext(EngineContext);
    const templatePath = useMemo(() => {
        const actor = store.get(path);
        const templates = store.get(['templates']);
        return parseTemplatePath(findPathById(templates, actor.templateId, (template) => template.id));
    }, [path, store]);
    const { name } = useConfig(templatePath);
    const handleTemplateInspect = useCallback(() => {
        world.dispatchEvent(EventType.SelectEntities, { paths: [templatePath] });
        world.dispatchEvent(EventType.InspectEntity, { path: templatePath });
    }, [templatePath, world]);
    return (_jsx(Labelled, { label: t('inspector.actorForm.field.templateName.label'), children: _jsxs(Space.Compact, { css: SpaceCompactCSS, size: "small", children: [_jsx(Input, { value: name, disabled: true }), _jsx(Button, { css: ButtonCSS, icon: _jsx(ArrowRightOutlined, {}), onClick: handleTemplateInspect })] }) }));
};
