import type { ReactElement } from 'react';
import React from 'react';
import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
import { StyledText, StyledView, StyledTagIcon } from './StyledTag';
import { useDeprecation } from '../../utils/hooks';
import type { IconName } from '../Icon';

interface TagProps extends ViewProps {
  /**
   * Content of the Tag.
   */
  content: string | ReactElement;
  /**
   * Places an icon within the tag, before the content.
   */
  icon?: IconName;
  /**
   * Visual intent color to apply to Tag.
   */
  intent?:
    | 'primary'
    | 'info'
    | 'success'
    | 'warning'
    | 'danger'
    | 'archived'
    | 'neutral';
  /**
   * Places an icon within the tag, after the content.
   */
  rightIcon?: IconName;
  /**
   * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
   *
   * Tag variant.
   */
  variant?: 'filled' | 'outlined';
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
}

const Tag = ({
  content,
  icon,
  variant = 'outlined',
  intent = 'primary',
  rightIcon,
  style,
  testID,
  ...nativeProps
}: TagProps): ReactElement => {
  useDeprecation(
    `Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.`,
    variant !== undefined
  );

  return (
    <StyledView
      {...nativeProps}
      themeIntent={intent}
      style={style}
      testID={testID}
    >
      {icon !== undefined && (
        <StyledTagIcon
          icon={icon}
          size="xsmall"
          themeIntent={intent}
          themePosition="left"
          testID={testID !== undefined ? `${testID}-left-icon` : undefined}
        />
      )}
      {typeof content === 'string' ? (
        <StyledText themeIntent={intent} fontWeight="medium">
          {content}
        </StyledText>
      ) : (
        content
      )}
      {rightIcon !== undefined && (
        <StyledTagIcon
          icon={rightIcon}
          size="xsmall"
          themeIntent={intent}
          themePosition="right"
          testID={testID !== undefined ? `${testID}-right-icon` : undefined}
        />
      )}
    </StyledView>
  );
};

export default Tag;