import React from 'react';
import { Text } from '@wix/design-system';
import { TagItemEditable } from '../TagItemEditable';
import { MessageActionModal } from '../../../../ActionModal';
import { Trans } from '../../../../Trans';
import { observer } from 'mobx-react-lite';
import { TAG_MAX_LENGTH } from '@wix/bex-core';
const _TagListItemEditable = ({ state, tag, isLastTag, }) => {
    const onCancel = () => {
        state.handleCancelEditCtaClick();
    };
    const onApprove = async (newName) => {
        await state.updateTag({ tag, newName, isLastTag });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(TagItemEditable, { tagName: tag.name, isLastTag: isLastTag, errorMessage: state.editedTagErrorMessage, onApprove: onApprove, onCancel: onCancel, maxLength: TAG_MAX_LENGTH }),
        state.confirmModalState.value && (React.createElement(MessageActionModal, { dataHook: "manage-tags-modal-confirm-delete-modal", state: state.confirmModalState, content: React.createElement(Trans, { i18nKey: "cairo.tags.manageTags.modal.deleteModal.body", values: { name: tag.name }, components: {
                    text: React.createElement(Text, null),
                    name: React.createElement(Text, { weight: "bold" }),
                } }), ...state.confirmModalState.value }))));
};
export const TagListItemEditable = observer(_TagListItemEditable);
//# sourceMappingURL=TagListItemEditable.js.map