import React, { useState } from 'react';
import { TableListItem, ListItemEditable, FormField, Input, } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
export const TagItemEditable = ({ tagName, isLastTag, errorMessage, onApprove, onCancel, maxLength, }) => {
    const { translate: t } = useWixPatternsContainer();
    const [currentValueLength, setCurrentValueLength] = useState(tagName?.length ?? 0);
    return (React.createElement(TableListItem, { options: [
            {
                value: (React.createElement(FormField, { dataHook: "manage-tags-modal-tag-form-field", status: errorMessage ? 'error' : undefined, statusMessage: errorMessage },
                    React.createElement(ListItemEditable, { dataHook: "manage-tags-modal-tag-editable", value: tagName ?? '', onEnterPressed: (e) => {
                            onApprove(e.currentTarget.value);
                        }, onChange: (e) => setCurrentValueLength(e.target.value.length), onApprove: onApprove, onCancel: onCancel, placeholder: t('cairo.tags.manageTags.modal.list.input.placeholder'), cancelButtonTooltipContent: t('cairo.tags.manageTags.modal.list.input.cancel.CTA'), approveButtonTooltipContent: t('cairo.tags.manageTags.modal.list.input.save.CTA'), approveButtonDisabledOnEmpty: false, autoFocus: true, size: 'small', margins: 'none', suffix: React.createElement(Input.Affix, null, `${currentValueLength} / ${maxLength}`) }))),
            },
        ], verticalPadding: "tiny", showDivider: !isLastTag }));
};
//# sourceMappingURL=TagItemEditable.js.map