var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useMemo, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { FormStyled } from '../inspector.style';
import { Field, DependencyField, LabelledTextInput, LabelledCheckbox, LabelledNumberInput, LabelledSelect, } from '../../../../../../../components';
import { useConfig, useCommander } from '../../../../../../../../../hooks';
import { setValue } from '../../../../../../../../../commands';
import { AnimationEditorContext } from '../../../providers';
import { PICK_MODE, STATE_TYPE } from '../../../const';
import { types } from './types';
import { pickModes } from './pick-modes';
export const StateInspector = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { inspectedEntity } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path;
    const state = useConfig(statePath);
    const namePath = useMemo(() => statePath.concat('name'), [statePath]);
    const speedPath = useMemo(() => statePath.concat('speed'), [statePath]);
    const typePath = useMemo(() => statePath.concat('type'), [statePath]);
    const loopedPath = useMemo(() => statePath.concat('timeline', 'looped'), [statePath]);
    const pickModePath = useMemo(() => statePath.concat('pickMode'), [statePath]);
    const xPath = useMemo(() => statePath.concat('pickProps', 'x'), [statePath]);
    const yPath = useMemo(() => statePath.concat('pickProps', 'y'), [statePath]);
    const substatesPath = useMemo(() => statePath.concat('substates'), [statePath]);
    const typeOptions = useMemo(() => types.map(({ value, title }) => ({ value, title: t(title) })), []);
    const pickModeOptions = useMemo(() => pickModes.map(({ value, title }) => ({ value, title: t(title) })), []);
    const handleTypeChange = useCallback((value) => {
        const _a = state, { substates, pickProps, pickMode, timeline } = _a, otherState = __rest(_a, ["substates", "pickProps", "pickMode", "timeline"]);
        if (value === STATE_TYPE.INDIVIDUAL) {
            dispatch(setValue(statePath, Object.assign(Object.assign({}, otherState), { type: value, timeline: { frames: [], looped: false } })));
        }
        else {
            dispatch(setValue(statePath, Object.assign(Object.assign({}, otherState), { type: value, substates: [], pickMode: '1D', pickProps: { x: '' } })));
        }
    }, [dispatch, state, statePath]);
    const handlePickModeChange = useCallback((value) => {
        const { substates } = state;
        if (value === PICK_MODE.ONE_DIMENSIONAL) {
            dispatch(setValue(substatesPath, substates.map((_a) => {
                var { y } = _a, substate = __rest(_a, ["y"]);
                return substate;
            }), true));
        }
        if (value === PICK_MODE.TWO_DIMENSIONAL) {
            dispatch(setValue(substatesPath, substates.map((substate) => (Object.assign(Object.assign({}, substate), { y: 0 }))), true));
        }
    }, [dispatch, state, substatesPath]);
    return (_jsxs(FormStyled, { children: [_jsx(Field, { path: namePath, component: LabelledTextInput, label: t('components.animatable.editor.state.name.title') }), _jsx(Field, { path: speedPath, component: LabelledNumberInput, label: t('components.animatable.editor.state.speed.title') }), _jsx(LabelledSelect, { label: t('components.animatable.editor.state.type.title'), options: typeOptions, onChange: handleTypeChange, value: state.type }), _jsx(DependencyField, { path: loopedPath, component: LabelledCheckbox, label: t('components.animatable.editor.state.looped.title'), dependencyPath: typePath, dependencyValue: STATE_TYPE.INDIVIDUAL, deleteOnHide: false }), _jsx(DependencyField, { path: pickModePath, component: LabelledSelect, label: t('components.animatable.editor.state.pickMode.title'), options: pickModeOptions, onAccept: handlePickModeChange, dependencyPath: typePath, dependencyValue: STATE_TYPE.GROUP, deleteOnHide: false }), _jsx(DependencyField, { path: xPath, component: LabelledTextInput, label: t('components.animatable.editor.state.pickProps.x.title'), dependencyPath: pickModePath, dependencyValue: `${PICK_MODE.ONE_DIMENSIONAL}|${PICK_MODE.TWO_DIMENSIONAL}`, deleteOnHide: false }), _jsx(DependencyField, { path: yPath, component: LabelledTextInput, label: t('components.animatable.editor.state.pickProps.y.title'), dependencyPath: pickModePath, dependencyValue: PICK_MODE.TWO_DIMENSIONAL })] }));
};
