import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useContext, useCallback, } from 'react';
import { getStatePath } from '../../utils/paths';
import { useConfig, useCommander } from '../../../../../../../../hooks';
import { HotkeysSectionProvider } from '../../../../../../../../providers';
import { CHILDREN_FIELD_MAP } from '../../const';
import { AnimationEditorContext } from '../../providers';
import { copyByPaths, moveByPaths } from '../../commands/transitions';
import { deleteByPaths } from '../../../../../../../../commands';
import { getSelectedPaths } from './utils';
import { List } from './list';
import { ActionBar } from './action-bar';
const ROOT_PATH = 'transitions';
export const TransitionList = ({ className = '', }) => {
    const { entitySelection, inspectedEntity } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity ? getStatePath(inspectedEntity.path) : undefined;
    const state = useConfig(statePath);
    const { dispatch } = useCommander();
    const handleCopyTo = useCallback((source, destination) => dispatch(copyByPaths(source, destination)), []);
    const handleMoveTo = useCallback((source, destination) => dispatch(moveByPaths(source, destination)), []);
    const handleRemove = useCallback((paths) => dispatch(deleteByPaths(paths)), []);
    return (_jsx(HotkeysSectionProvider, { childrenFieldMap: CHILDREN_FIELD_MAP, rootPath: statePath === null || statePath === void 0 ? void 0 : statePath.concat(ROOT_PATH), selectedPaths: getSelectedPaths(entitySelection.paths), onCopyTo: handleCopyTo, onMoveTo: handleMoveTo, onRemove: handleRemove, children: _jsxs("div", { className: className, children: [_jsx(ActionBar, {}), !!state && _jsx(List, {})] }) }));
};
