import React, { useCallback } from "react";
import { Text, VStack, HStack, Image, Spacer, Radio, View } from "native-base";
import { illustrations, EnhancedTouchableOpacity } from "@flip.id/ui-kit";
import type { IFlipColors } from "../../../../config/interfaces/IFlipColors";
import type { IColors } from "native-base/lib/typescript/theme/base/colors";
import type { AccessibilityProps, ImageSourcePropType } from "react-native";

export enum TransferMethodType {
  saldo_flip = "saldo_flip",
  regular_bank = "regular_bank",
  virtual_account = "virtual_account",
}

interface TransferMethodCardProps {
  title?: string;
  sideTitle?: string;
  as?: React.ComponentType<any>;
  subtitle: string;
  sideSubtitle?: string;
  colorSideSubTitle?: IFlipColors | IColors;
  colorBadge?: IFlipColors | IColors;
  badgeLabel?: string;
  icon?: ImageSourcePropType;
  type?: keyof typeof TransferMethodType;
  onPress?: () => void;
}

export const TransferMethodCard: React.FC<
  TransferMethodCardProps & AccessibilityProps
> = (props) => {
  const {
    as,
    icon,
    onPress,
    title,
    type,
    subtitle,
    sideTitle,
    sideSubtitle,
    colorSideSubTitle,
    colorBadge,
    badgeLabel,
    ...rest
  } = props;

  const [isActive, setIsActive] = React.useState(false);

  const _icon = useCallback(() => {
    switch (type) {
      case TransferMethodType.saldo_flip:
        return illustrations.logo.flip;

      case TransferMethodType.regular_bank:
        return illustrations.logo.bank_bri;

      case TransferMethodType.virtual_account:
        return illustrations.logo.bank_bri;

      default:
        return illustrations.logo.flip;
    }
  }, [type]);

  const onPressButton = () => {
    onPress && onPress();
    setIsActive(!isActive);
  };

  return (
    <EnhancedTouchableOpacity
      as={as}
      activeOpacity={0.8}
      onPress={onPressButton}
      {...rest}
    >
      <HStack
        bg="neutral.White"
        borderWidth="1"
        borderColor={isActive ? "flipOrange.Main" : "neutral.BorderAndDisabled"}
        rounded="16"
        px="4"
        py="25px"
        alignItems="center"
        space="4"
      >
        <Image h="11" source={icon ? icon : _icon()} w="11" />
        <VStack>
          {type === TransferMethodType.saldo_flip && (
            <HStack>
              <Text fontSize="sm" lineHeight="24px">
                {title}{" "}
              </Text>
              {sideTitle && (
                <Text
                  fontSize="sm"
                  italic
                  lineHeight="24px"
                  color="crimsonRed.Main"
                >
                  ({sideTitle})
                </Text>
              )}
            </HStack>
          )}
          <HStack>
            <Text fontWeight="bold" fontSize="sm" lineHeight="24px">
              {subtitle}{" "}
            </Text>
            {sideSubtitle && (
              <Text
                italic
                fontSize="sm"
                lineHeight="24px"
                color={colorSideSubTitle}
              >
                ({sideSubtitle})
              </Text>
            )}
          </HStack>
        </VStack>
        <Spacer />
        {badgeLabel && (
          <View
            position="absolute"
            top="0"
            right="20px"
            px="4px"
            py="2px"
            borderBottomRadius="6px"
            backgroundColor={colorBadge}
          >
            <Text fontSize="sm" lineHeight="24px" color="#FFF">
              {badgeLabel}
            </Text>
          </View>
        )}
        <Radio.Group
          colorScheme="warning"
          name="myRadioGroup"
          value={isActive ? "one" : "none"}
        >
          <Radio value="one" my="1" />
        </Radio.Group>
      </HStack>
    </EnhancedTouchableOpacity>
  );
};

export default TransferMethodCard;