import { View, Text, TouchableOpacity } from 'react-native';
import React, { ReactElement } from 'react';
import Close from '../icons/close.svg';
import { classNames } from '../utils';
import { ViewProps } from 'react-native';

export enum TagVariant {
  PRIMARY = 'PRIMARY',
  SECONDARY = 'SECONDARY',
  TERTIARY = 'TERTIARY',
}

export interface TagProps extends ViewProps {
  variant?: TagVariant;
  label: string;
  accessoryLeft?: ReactElement | (() => ReactElement);
  isRemoveable?: boolean;
  textColor?: string;
  onRemove?: () => void;
  className?: string;
}

export const Tag: React.FC<TagProps> = ({
  variant = TagVariant.PRIMARY,
  label,
  textColor,
  accessoryLeft,
  isRemoveable,
  onRemove,
  className,
  ...restOfProps
}) => {
  return (
    <View className="flex flex-row items-center justify-start">
      <View
        className={classNames(
          'px-4 inline-flex flex-row items-center py-2 rounded-full',
          `${
            variant === TagVariant.SECONDARY || variant === TagVariant.TERTIARY
              ? 'bg-brand-50'
              : 'bg-neutral-100'
          }`,
          className
        )}
        {...restOfProps}
      >
        {accessoryLeft && (
          <View className={`${label && 'mr-2'}`}>
            {typeof accessoryLeft === 'function'
              ? accessoryLeft()
              : accessoryLeft}
          </View>
        )}
        <Text
          className={classNames(
            'font-poppins-medium text-sm',
            `${variant === TagVariant.TERTIARY ? 'text-brand-500' : ''}`
          )}
          style={textColor ? { color: textColor } : undefined}
        >
          {label}
        </Text>
        {isRemoveable && onRemove && (
          <TouchableOpacity onPress={onRemove} className="ml-2">
            <Close height={16} width={16} />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};