import React, { useMemo } from 'react';
import { TagsListItemView } from './TagListItemView';
import { TagListItemEditable } from './TagListItemEditable';
import { TagsModalState } from '../../../../../state/TagsModalState';
import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
import { observer } from 'mobx-react-lite';

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

export const _TagsListItem = ({ state, tag, isLastTag }: TagsListItemProps) => {
  const viewMode = useMemo(
    () => tag?.id !== state.editedTagId,
    [state.editedTagId, tag],
  );

  return viewMode && tag ? (
    <TagsListItemView state={state} tag={tag} isLastTag={isLastTag} />
  ) : (
    <TagListItemEditable state={state} tag={tag} isLastTag={isLastTag} />
  );
};

export const TagsListItem = observer(_TagsListItem);
