import * as React from 'react';
import { View } from 'react-native';
import { getColor } from './style-utils';
import Text from './text';

// Badge 컴포넌트의 Props 타입 정의
type BadgeProps =
  | {
      variant: 'dot';
      dotPosition?: string;
      color?: string;
    }
  | {
      variant: 'new';
      size?: 'medium' | 'small';
      color?: string;
    }
  | {
      variant: 'number';
      count?: number;
      size?: 'medium' | 'small';
      color?: string;
    };

const Badge: React.FC<BadgeProps> = (props) => {
  if (props.variant === 'dot') {
    const { dotPosition = 'absolute top-0 right-0', color = 'emerald-500' } =
      props;
    return (
      <View
        className={`${dotPosition} mt-[-2px] mr-[-2px] w-[4px] h-[4px] rounded-full`}
        style={{ backgroundColor: getColor(color) }}
      />
    );
  }

  if (props.variant === 'new') {
    const { size = 'medium', color = 'emerald-500' } = props;
    const numberBadgePosition =
      size === 'small' ? 'top-[-2] right-[-6]' : 'top-[-4] right-[-8]';
    return (
      <View
        className={`absolute rounded-full justify-center items-center ${numberBadgePosition}`}
        style={{
          backgroundColor: getColor(color),
          width: size === 'medium' ? 20 : 16,
          height: size === 'medium' ? 20 : 16,
        }}
      >
        <Text
          face={'caption'}
          weight={'semibold'}
          size={size === 'medium' ? 'medium' : 'small'}
          textColor={'white'}
        >
          N
        </Text>
      </View>
    );
  }

  if (props.variant === 'number') {
    const { count = 1, size = 'medium', color = 'emerald-500' } = props;
    const isCountLarge = count > 99;
    const adjustedRight = isCountLarge
      ? size === 'small'
        ? '-16'
        : '-20'
      : size === 'small'
        ? '-6'
        : '-8';
    const adjustedPosition =
      size === 'small'
        ? `top-[-2] right-[${adjustedRight}]`
        : `top-[-4] right-[${adjustedRight}]`;

    return (
      <View
        className={`absolute rounded-full justify-center items-center ${adjustedPosition}`}
        style={{
          backgroundColor: getColor(color),
          minWidth: size === 'medium' ? 20 : 16,
          height: size === 'medium' ? 20 : 16,
          paddingHorizontal: 4,
        }}
      >
        <Text
          face={'caption'}
          weight={'semibold'}
          size={size === 'medium' ? 'medium' : 'small'}
          textColor={'white'}
        >
          {count > 99 ? '99+' : count}
        </Text>
      </View>
    );
  }
};

export default Badge;