import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useMemo, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import { FormStyled, FooterStyled, ButtonCSS } from '../inspector.style';
import { Field, LabelledNumberInput, LabelledSelect, } from '../../../../../../../components';
import { useConfig, useCommander } from '../../../../../../../../../hooks';
import { addValue } from '../../../../../../../../../commands';
import { AnimationEditorContext } from '../../../providers';
import { CONDITION_TYPE } from '../../../const';
import { Condition } from './condition';
import { ConditionsStyled, ConditionStyled } from './transition-inspector.style';
export const TransitionInspector = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { path, inspectedEntity } = useContext(AnimationEditorContext);
    const statesPath = useMemo(() => path.concat('states'), [path]);
    const transitionPath = inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path;
    const stateTransitionPath = useMemo(() => transitionPath.concat('state'), [transitionPath]);
    const timePath = useMemo(() => transitionPath.concat('time'), [transitionPath]);
    const conditionsPath = useMemo(() => transitionPath.concat('conditions'), [transitionPath]);
    const states = useConfig(statesPath);
    const statesOptions = useMemo(() => states.map((state) => ({
        title: state.name,
        value: state.id,
    })), [states]);
    const conditions = useConfig(conditionsPath);
    const handleAddCondition = useCallback(() => {
        dispatch(addValue(conditionsPath, {
            id: uuidv4(),
            type: CONDITION_TYPE.EVENT,
            props: {
                eventType: '',
            },
        }));
    }, [dispatch, conditionsPath]);
    return (_jsxs(FormStyled, { children: [_jsx(Field, { path: stateTransitionPath, component: LabelledSelect, label: t('components.animatable.editor.transition.state.title'), options: statesOptions }), _jsx(Field, { path: timePath, component: LabelledNumberInput, label: t('components.animatable.editor.transition.time.title') }), _jsx(ConditionsStyled, { children: conditions.map((condition, index) => (_jsx(ConditionStyled, { children: _jsx(Condition, { path: conditionsPath, id: condition.id, order: index }) }, condition.id))) }), _jsx(FooterStyled, { children: _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddCondition, children: t('components.animatable.editor.condition.add.button.title') }) })] }));
};
