import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getStatePath, getSubstatePath } from '../../utils/paths';
import { ActionBarStyled, ActionButtonCSS } from '../../editor.style';
import { useConfig, useCommander } from '../../../../../../../../hooks';
import { HotkeysBar } from '../../../../../../../../components';
import { AnimationEditorContext } from '../../providers';
import { addFrame } from '../../commands/frames';
import { getFramesPath } from './utils';
export const ActionBar = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { inspectedEntity } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity ? getStatePath(inspectedEntity.path) : undefined;
    const substatePath = inspectedEntity ? getSubstatePath(inspectedEntity.path) : undefined;
    const state = useConfig(statePath);
    const framesPath = getFramesPath(state, statePath, substatePath);
    const handleAdd = useCallback(() => {
        dispatch(addFrame(framesPath));
    }, [dispatch, framesPath]);
    return (_jsxs(ActionBarStyled, { children: [_jsx(Button, { css: ActionButtonCSS, icon: _jsx(PlusOutlined, {}), size: "small", onClick: handleAdd, title: t('components.animatable.editor.frame.add.button.title'), disabled: framesPath === undefined }), _jsx(HotkeysBar, {})] }));
};
