import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import useTestIds from '../../hooks/useTestIds';
import useI18n from '../../hooks/useI18n';
import Icon, { registerIcon } from '../Icon';
import * as pencilIcon from '../Icon/icons/pencil.icon';
import Flex from '../Flex';
import { useConsolidatedRef, useElement } from '../../hooks';
import { getInlineEditTestIds } from './InlineEdit.test-ids';
import { StyledEditButton, StyledInlineEdit, StyledContent, StyledInlineEditDialog } from './InlineEdit.styles';
registerIcon(pencilIcon);
const InlineEdit = forwardRef(function InlineEdit({ children, contextualLabel, editForm, progress, onEdit, onCancel, onSubmit, testId, ...restProps }, refProp) {
    const ref = useConsolidatedRef(refProp);
    const t = useI18n();
    const testIds = useTestIds(testId, getInlineEditTestIds);
    const editLabel = `${t('edit')} - ${contextualLabel}`;
    const [editButton, setButtonEl] = useElement();
    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { inline: true, alignItems: 'start', justify: 'between', gap: 0.5 }, as: StyledInlineEdit, onDoubleClick: onEdit, ref: ref, children: [_jsx(StyledContent, { children: children }), _jsx(StyledEditButton, { "data-testid": testIds.button, ref: setButtonEl, icon: true, compact: true, variant: 'simple', onClick: onEdit, label: t('edit'), "aria-label": editLabel, "aria-haspopup": 'dialog', "aria-hidden": !!editForm && !!editButton ? true : undefined, children: _jsx(Icon, { name: 'pencil' }) }), editForm && editButton && (_jsx(StyledInlineEditDialog, { "data-testid": testIds.dialog, progress: progress, target: editButton, placement: 'bottom-start', "aria-label": editLabel, onCancel: onCancel, onSubmit: onSubmit, children: editForm }))] }));
});
export default InlineEdit;
//# sourceMappingURL=InlineEdit.js.map