'use client'

import { forwardRef, memo } from 'react'

import { CancelSmallIcon } from '@channel.io/bezier-icons'

import { isEmpty, isNil } from '~/src/utils/type'

import { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'
import { Icon } from '~/src/components/Icon'

import { type TagProps } from './Tag.types'

import styles from './Tag.module.scss'

/**
 * @deprecated
 */
const TAG_TEST_ID = 'bezier-tag'

/**
 * @deprecated
 */
const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'

/**
 * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.
 * @example
 * ```tsx
 * <Tag
 *   size="m"
 *   variant="default"
 *   onDelete={handleDelete}
 * >
 *   Payment
 * </Tag>
 * ```
 */
export const Tag = memo(
  forwardRef<HTMLDivElement, TagProps>(function Tag(
    { size = 'm', variant = 'default', children, onDelete, ...rest },
    forwardedRef
  ) {
    return (
      <BaseTagBadge
        ref={forwardedRef}
        size={size}
        variant={variant}
        data-testid={TAG_TEST_ID}
        {...rest}
      >
        {!isEmpty(children) && (
          <BaseTagBadgeText
            size={size}
            marginHorizontal={2}
            color="text-neutral"
          >
            {children}
          </BaseTagBadgeText>
        )}

        {!isNil(onDelete) && (
          <Icon
            role="button"
            aria-label="delete"
            tabIndex={0}
            className={styles.TagDeleteIcon}
            source={CancelSmallIcon}
            size="xs"
            color="text-neutral-light"
            onClick={(e) => {
              e.stopPropagation()
              onDelete(e)
            }}
            data-testid={TAG_DELETE_TEST_ID}
          />
        )}
      </BaseTagBadge>
    )
  })
)