import React from 'react';
import {
  TableListItem,
  Tag as TagComponent,
  IconButton,
  Box,
  Tooltip,
} from '@wix/design-system';
import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
import { TagsModalState } from '../../../../../state/TagsModalState';

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

export const TagsListItemView = ({
  state,
  tag,
  isLastTag,
}: TagsListItemViewProps) => {
  const { translate: t } = useWixPatternsContainer();

  const handleEditClick = () => {
    state.handleEditCtaClick(tag);
  };

  const handleDeleteClick = () => {
    state.deleteTag(tag);
  };

  return (
    <TableListItem
      dataHook="manage-tags-modal-tag-row"
      options={[
        {
          value: (
            <TagComponent
              id={tag.id!}
              removable={false}
              ellipsisProps={{ enterDelay: 500 }}
              dataHook="manage-tags-modal-tag"
            >
              {tag.name}
            </TagComponent>
          ),
          width: '1fr',
          align: 'left',
        },
        {
          value: (
            <Box gap="SP2" align="right">
              <Tooltip
                content={t(
                  'cairo.tags.manageTags.modal.list.action.rename.CTA',
                )}
              >
                <IconButton
                  dataHook="manage-tags-modal-tag-action-edit"
                  size="small"
                  priority="secondary"
                  onClick={handleEditClick}
                >
                  <EditSmall />
                </IconButton>
              </Tooltip>
              <Tooltip
                content={t(
                  'cairo.tags.manageTags.modal.list.action.delete.CTA',
                )}
              >
                <IconButton
                  dataHook="manage-tags-modal-tag-action-delete"
                  size="small"
                  priority="secondary"
                  onClick={handleDeleteClick}
                >
                  <DeleteSmall />
                </IconButton>
              </Tooltip>
            </Box>
          ),
          width: 'max-content',
          align: 'right',
        },
      ]}
      verticalPadding="tiny"
      showDivider={!isLastTag}
    />
  );
};
