import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, useMemo } from 'react';
import { deleteByPaths } from '../../../../../../../../commands';
import { AnimationEditorContext } from '../../providers';
import { useCommander } from '../../../../../../../../hooks';
import { HotkeysSectionProvider } from '../../../../../../../../providers';
import { CHILDREN_FIELD_MAP } from '../../const';
import { copyByPaths, moveByPaths } from '../../commands/states';
import { getSelectedPaths } from './utils';
import { List } from './list';
import { ActionBar } from './action-bar';
const ROOT_PATH = 'states';
export const StateList = ({ className = '', }) => {
    const { path, entitySelection } = useContext(AnimationEditorContext);
    const { dispatch } = useCommander();
    const rootPath = useMemo(() => path.concat(ROOT_PATH), [path]);
    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: rootPath, selectedPaths: getSelectedPaths(entitySelection.paths), onCopyTo: handleCopyTo, onMoveTo: handleMoveTo, onRemove: handleRemove, children: _jsxs("div", { className: className, children: [_jsx(ActionBar, {}), _jsx(List, { onDrop: handleMoveTo })] }) }));
};
