import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { useCallback, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Typography } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import { InspectedEntityContext } from '../../../../providers';
import { useConfig } from '../../../../hooks';
import { forms } from '../../forms';
import { HeaderStyled } from './entity-inspector.style';
export const EntityInspector = () => {
    const { t } = useTranslation();
    const { type, path } = useContext(InspectedEntityContext);
    const entity = useConfig(path);
    const handleCopyId = useCallback(() => {
        if (!entity) {
            return;
        }
        void navigator.clipboard.writeText(entity.id);
    }, [entity]);
    const FormComponent = type ? forms[type] : null;
    if (!FormComponent || !path) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [_jsxs(HeaderStyled, { children: [_jsx(Typography.Text, { strong: true, children: t(`inspector.entityInspector.${type}.title`) }), _jsx(Button, { icon: _jsx(CopyOutlined, {}), size: "small", onClick: handleCopyId, title: t('inspector.entityInspector.copyIdButton.title') })] }), _jsx(FormComponent, { path: path })] }));
};
