import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { Modal } from '../../../../../components';
import { Editor } from './editor';
import { AnimationEditorProvider } from './editor/providers';
export const AnimatableWidget = ({ path }) => {
    const { t } = useTranslation();
    const [open, setOpen] = useState(false);
    const handleEditorOpen = useCallback(() => setOpen(true), []);
    const handleEditorClose = useCallback(() => setOpen(false), []);
    return (_jsxs("div", { children: [_jsx(Button, { size: "small", onClick: handleEditorOpen, block: true, children: t('components.animatable.openEditorButton.title') }), _jsx(Modal, { title: t('components.animatable.editor.title'), open: open, onCancel: handleEditorClose, width: "90%", children: _jsx(AnimationEditorProvider, { path: path, children: _jsx(Editor, {}) }) })] }));
};
