import React from 'react';

import { TagItemEditable } from './TagItemEditable';
import { TagsModalState } from '../../../../state/TagsModalState';
import { observer } from 'mobx-react-lite';
import { TAG_MAX_LENGTH } from '@wix/bex-core';

export interface NewTagItemEditableProps {
  state: TagsModalState;
}

const _NewTagItemEditable = ({ state }: NewTagItemEditableProps) => {
  const handleApprove = (name: string) => {
    state.createTagFromList(name);
  };
  const handleCancel = () => {
    state.handleCancelEditCtaClick();
  };

  return (
    <TagItemEditable
      isLastTag
      errorMessage={state.editedTagErrorMessage}
      onApprove={handleApprove}
      onCancel={handleCancel}
      maxLength={TAG_MAX_LENGTH}
    />
  );
};

export const NewTagItemEditable = observer(_NewTagItemEditable);
