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 { useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { DependencyField, LabelledTextInput, LabelledSelect, Panel, } from '../../../../../../../components';
import { useConfig, useCommander, useExtension } from '../../../../../../../../../hooks';
import { deleteValue, setValue } from '../../../../../../../../../commands';
import { COMPARATOR_VALUE, CONDITION_TYPE } from '../../../const';
import { conditionTypes } from './condition-types';
import { comparatorValues, COMPARATOR_TYPES_MAP, COMPARATOR_INITIAL_VALUES_MAP, } from './comparator-values';
import { operationTypes } from './operation-types';
export const Condition = ({ path, id, order, }) => {
    var _a, _b;
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { events } = useExtension();
    const conditionPath = useMemo(() => path.concat(`id:${id}`), [id, path]);
    const typePath = useMemo(() => conditionPath.concat('type'), [conditionPath]);
    const propsPath = useMemo(() => conditionPath.concat('props'), [conditionPath]);
    const eventTypePath = useMemo(() => propsPath.concat('eventType'), [propsPath]);
    const arg1TypePath = useMemo(() => propsPath.concat('arg1', 'type'), [propsPath]);
    const arg1ValuePath = useMemo(() => propsPath.concat('arg1', 'value'), [propsPath]);
    const arg2TypePath = useMemo(() => propsPath.concat('arg2', 'type'), [propsPath]);
    const arg2ValuePath = useMemo(() => propsPath.concat('arg2', 'value'), [propsPath]);
    const operationPath = useMemo(() => propsPath.concat('operation'), [propsPath]);
    const condition = useConfig(conditionPath);
    const { arg1, arg2 } = condition.props;
    const handleTypeChange = useCallback((value) => {
        const { props } = condition, otherCondition = __rest(condition, ["props"]);
        if (value === CONDITION_TYPE.EVENT) {
            dispatch(setValue(conditionPath, Object.assign(Object.assign({}, otherCondition), { type: value, props: {
                    eventType: '',
                } })));
        }
        else {
            dispatch(setValue(conditionPath, Object.assign(Object.assign({}, otherCondition), { type: value, props: {
                    arg1: { type: COMPARATOR_VALUE.NUMBER, value: 0 },
                    arg2: { type: COMPARATOR_VALUE.NUMBER, value: 0 },
                    operation: 'equals',
                } })));
        }
    }, [dispatch, conditionPath, condition]);
    const handleArg1TypeChange = useCallback((value) => {
        dispatch(setValue(arg1ValuePath, COMPARATOR_INITIAL_VALUES_MAP[value], true));
    }, [dispatch, arg1ValuePath]);
    const handleArg2TypeChange = useCallback((value) => {
        dispatch(setValue(arg2ValuePath, COMPARATOR_INITIAL_VALUES_MAP[value], true));
    }, [dispatch, arg2ValuePath]);
    const handleDeleteBind = useCallback(() => {
        dispatch(deleteValue(conditionPath));
    }, [dispatch, conditionPath]);
    return (_jsxs(Panel, { title: t('components.animatable.editor.condition.title', { index: order + 1 }), onDelete: handleDeleteBind, children: [_jsx(LabelledSelect, { label: t('components.animatable.editor.condition.type.title'), options: conditionTypes, onChange: handleTypeChange, value: condition.type }), _jsx(DependencyField, { path: eventTypePath, component: events ? LabelledSelect : LabelledTextInput, label: t('components.animatable.editor.condition.eventType.title'), options: events, dependencyPath: typePath, dependencyValue: CONDITION_TYPE.EVENT, deleteOnHide: false }), _jsx(DependencyField, { path: arg1TypePath, component: LabelledSelect, label: t('components.animatable.editor.condition.arg1.type.title'), options: comparatorValues, onAccept: handleArg1TypeChange, dependencyPath: typePath, dependencyValue: CONDITION_TYPE.COMPARATOR, deleteOnHide: false }), _jsx(DependencyField, { path: arg1ValuePath, component: COMPARATOR_TYPES_MAP[(_a = arg1 === null || arg1 === void 0 ? void 0 : arg1.type) !== null && _a !== void 0 ? _a : COMPARATOR_VALUE.COMPONENT_VALUE], label: t('components.animatable.editor.condition.arg1.value.title'), dependencyPath: typePath, dependencyValue: CONDITION_TYPE.COMPARATOR, deleteOnHide: false }), _jsx(DependencyField, { path: operationPath, component: LabelledSelect, label: t('components.animatable.editor.condition.operation.title'), options: operationTypes, dependencyPath: typePath, dependencyValue: CONDITION_TYPE.COMPARATOR, deleteOnHide: false }), _jsx(DependencyField, { path: arg2TypePath, component: LabelledSelect, label: t('components.animatable.editor.condition.arg2.type.title'), options: comparatorValues, onAccept: handleArg2TypeChange, dependencyPath: typePath, dependencyValue: CONDITION_TYPE.COMPARATOR, deleteOnHide: false }), _jsx(DependencyField, { path: arg2ValuePath, component: COMPARATOR_TYPES_MAP[(_b = arg2 === null || arg2 === void 0 ? void 0 : arg2.type) !== null && _b !== void 0 ? _b : COMPARATOR_VALUE.COMPONENT_VALUE], label: t('components.animatable.editor.condition.arg2.value.title'), dependencyPath: typePath, dependencyValue: CONDITION_TYPE.COMPARATOR, deleteOnHide: false })] }));
};
