import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { PlusOutlined, PlusCircleOutlined, RightCircleOutlined, } from '@ant-design/icons';
import { getStatePath } from '../../utils/paths';
import { ActionBarStyled, ActionButtonCSS } from '../../editor.style';
import { useConfig, useCommander } from '../../../../../../../../hooks';
import { HotkeysBar } from '../../../../../../../../components';
import { AnimationEditorContext } from '../../providers';
import { addState, addSubstate, setInitialState } from '../../commands/states';
export const ActionBar = () => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const { path, inspectedEntity, } = useContext(AnimationEditorContext);
    const statePath = inspectedEntity ? getStatePath(inspectedEntity.path) : undefined;
    const statesPath = useMemo(() => path.concat('states'), [path]);
    const substatesPath = useMemo(() => statePath && statePath.concat('substates'), [statePath]);
    const selectedStateConfig = useConfig(statePath);
    const handleAddSubstate = useCallback(() => {
        dispatch(addSubstate(substatesPath));
    }, [dispatch, substatesPath]);
    const handleAddState = useCallback(() => {
        dispatch(addState(statesPath));
    }, [dispatch, statesPath]);
    const handleInitialSet = useCallback(() => {
        dispatch(setInitialState(statePath));
    }, [dispatch, statePath]);
    return (_jsxs(ActionBarStyled, { children: [_jsx(Button, { css: ActionButtonCSS, icon: _jsx(PlusOutlined, {}), size: "small", onClick: handleAddState, title: t('components.animatable.editor.state.add.button.title') }), _jsx(Button, { css: ActionButtonCSS, icon: _jsx(PlusCircleOutlined, {}), size: "small", onClick: handleAddSubstate, title: t('components.animatable.editor.substate.add.button.title'), disabled: ((inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) !== 'state' || (selectedStateConfig === null || selectedStateConfig === void 0 ? void 0 : selectedStateConfig.type) !== 'group') && (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) !== 'substate' }), _jsx(Button, { css: ActionButtonCSS, icon: _jsx(RightCircleOutlined, {}), size: "small", onClick: handleInitialSet, title: t('components.animatable.editor.state.setInitial.button.title'), disabled: (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) !== 'state' }), _jsx(HotkeysBar, {})] }));
};
