import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useContext, useCallback, } from 'react';
import { deleteByPaths } from '../../../../../../../../commands';
import { getStatePath, getSubstatePath } 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/frames';
import { getSelectedPaths, getFramesPath } from './utils';
import { ActionBar } from './action-bar';
import { List } from './list';
import { TimelineWrapperStyled } from './timeline.style';
export const Timeline = ({ className = '', }) => {
    const { entitySelection, inspectedEntity } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity ? getStatePath(inspectedEntity.path) : undefined;
    const substatePath = inspectedEntity ? getSubstatePath(inspectedEntity.path) : undefined;
    const state = useConfig(statePath);
    const { dispatch } = useCommander();
    const framesPath = getFramesPath(state, statePath, substatePath);
    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: framesPath, selectedPaths: getSelectedPaths(entitySelection.paths), onCopyTo: handleCopyTo, onMoveTo: handleMoveTo, onRemove: handleRemove, children: _jsxs("div", { className: className, children: [_jsx(ActionBar, {}), _jsx(TimelineWrapperStyled, { children: !!state && _jsx(List, {}) })] }) }));
};
