import React from 'react';
import { Text } from '@wix/design-system';
import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
import { TagsModalState } from '../../../../../state/TagsModalState';
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';

export interface TagListItemEditableProps {
  state: TagsModalState;
  tag: Tag;
  isLastTag: boolean;
}

const _TagListItemEditable = ({
  state,
  tag,
  isLastTag,
}: TagListItemEditableProps) => {
  const onCancel = () => {
    state.handleCancelEditCtaClick();
  };

  const onApprove = async (newName: string) => {
    await state.updateTag({ tag, newName, isLastTag });
  };

  return (
    <>
      <TagItemEditable
        tagName={tag.name!}
        isLastTag={isLastTag}
        errorMessage={state.editedTagErrorMessage}
        onApprove={onApprove}
        onCancel={onCancel}
        maxLength={TAG_MAX_LENGTH}
      />

      {state.confirmModalState.value && (
        <MessageActionModal
          dataHook="manage-tags-modal-confirm-delete-modal"
          state={state.confirmModalState}
          content={
            <Trans
              i18nKey="cairo.tags.manageTags.modal.deleteModal.body"
              values={{ name: tag.name }}
              components={{
                text: <Text />,
                name: <Text weight="bold" />,
              }}
            />
          }
          {...state.confirmModalState.value}
        />
      )}
    </>
  );
};

export const TagListItemEditable = observer(_TagListItemEditable);
