import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { FormStyled } from '../inspector.style';
import { Field, DependencyField, LabelledTextInput, LabelledCheckbox, LabelledNumberInput, } from '../../../../../../../components';
import { AnimationEditorContext } from '../../../providers';
import { getStatePath } from '../../../utils/paths';
export const SubstateInspector = () => {
    const { t } = useTranslation();
    const { inspectedEntity } = useContext(AnimationEditorContext);
    const substatePath = inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path;
    const statePath = getStatePath(substatePath);
    const namePath = useMemo(() => substatePath.concat('name'), [substatePath]);
    const loopedPath = useMemo(() => substatePath.concat('timeline', 'looped'), [substatePath]);
    const xPath = useMemo(() => substatePath.concat('x'), [substatePath]);
    const yPath = useMemo(() => substatePath.concat('y'), [substatePath]);
    const pickModePath = useMemo(() => statePath.concat('pickMode'), [statePath]);
    return (_jsxs(FormStyled, { children: [_jsx(Field, { path: namePath, component: LabelledTextInput, label: t('components.animatable.editor.state.name.title') }), _jsx(Field, { path: loopedPath, component: LabelledCheckbox, label: t('components.animatable.editor.state.looped.title') }), _jsx(Field, { path: xPath, component: LabelledNumberInput, label: t('components.animatable.editor.substate.x.title') }), _jsx(DependencyField, { path: yPath, component: LabelledNumberInput, label: t('components.animatable.editor.substate.y.title'), dependencyPath: pickModePath, dependencyValue: "2D" })] }));
};
