import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useContext, } from 'react';
import { Typography } from 'antd';
import { useTranslation } from 'react-i18next';
import { useConfig } from '../../../../../../../../hooks';
import { AnimationEditorContext } from '../../providers';
import { StateInspector } from './state-inspector';
import { SubstateInspector } from './substate-inspector';
import { TransitionInspector } from './transition-inspector';
import { FrameInspector } from './frame-inspector';
import { InspectorStyled, HeaderStyled, InspectorContentStyled, } from './inspector.style';
export const Inspector = () => {
    const { t } = useTranslation();
    const { inspectedEntity } = useContext(AnimationEditorContext);
    const entity = useConfig(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.path);
    return (_jsxs(InspectorStyled, { children: [_jsx(HeaderStyled, { children: !!entity && (_jsx(Typography.Text, { strong: true, children: t(`components.animatable.editor.inspector.${inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type}.title`) })) }), !!entity && (_jsxs(InspectorContentStyled, { children: [(inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'state' && _jsx(StateInspector, {}), (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'transition' && _jsx(TransitionInspector, {}), (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'frame' && _jsx(FrameInspector, {}), (inspectedEntity === null || inspectedEntity === void 0 ? void 0 : inspectedEntity.type) === 'substate' && _jsx(SubstateInspector, {})] }))] }));
};
