import React from "react";
import { HStack, Text } from "native-base";
import type { AccessibilityProps } from "react-native";
import { EnhancedTouchableOpacity } from "@flip.id/ui-kit";
import type { IBadgePropsNew } from "./types";
import BadgeIndicator from "./BadgeIndicator";
import BadgeVA from "./BadgeVA";

export const Badge: React.FC<IBadgePropsNew & AccessibilityProps> = (props) => {
  const {
    as,
    label,
    colorScheme,
    onPress,
    rightIcon,
    leftIcon,
    color,
    bgColor,
    type,
    ...rest
  } = props;
  const colorStyling = React.useMemo(
    () => ({
      bg: bgColor || `${colorScheme}.Minus2`,
      color: color || `${colorScheme}.Plus2`,
    }),
    [colorScheme, bgColor, color]
  );

  if (type === "indicator") {
    return <BadgeIndicator {...props} />;
  }

  if (type === "va") {
    return <BadgeVA {...props} />;
  }

  return (
    <EnhancedTouchableOpacity
      as={as}
      activeOpacity={0.8}
      onPress={onPress}
      {...rest}
    >
      <HStack
        bg={colorStyling.bg}
        alignItems="center"
        rounded="full"
        space="2"
        paddingX="11px"
        paddingY="3px"
      >
        {!!leftIcon && leftIcon}
        <Text color={colorStyling.color} fontSize="sm">
          {label}
        </Text>
        {!!rightIcon && rightIcon}
      </HStack>
    </EnhancedTouchableOpacity>
  );
};

Badge.defaultProps = {
  colorScheme: "crimsonRed",
  type: "normal",
};

export default Badge;