import { images_swirl_white } from "@flip.id/ui-kit";
import {
  Box,
  HStack,
  IconButton,
  Image,
  Input,
  Text,
  View,
  VStack,
} from "native-base";
import type { InterfaceInputProps } from "native-base/lib/typescript/components/primitives/Input/types";
import type { ColorType } from "native-base/lib/typescript/components/types";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import type { ImageSourcePropType } from "react-native";
import { CloseMedium } from "../../../../icons/navigation";
import { addThousandSeparator, removeNonNumeric } from "../../../../utils";

export enum BeneficiaryCardType {
  red = "red",
  green = "green",
  blue = "blue",
  yellow = "yellow",
}

export interface IBeneficiaryCardProps {
  variant: keyof typeof BeneficiaryCardType;
  name: string;
  key: string;
  accountNumber: string;
  avatar: ImageSourcePropType;
  bankIcon: ImageSourcePropType;
  showNominalField?: boolean;
  nominalValue?: string | number;
  inputRef?: InterfaceInputProps["ref"];
  onChangeNominal?: (text: string) => void;
  avatarImgComponent?: React.ReactElement;
  bankIconComponent?: React.ReactElement;
}

export const BeneficiaryCard: React.FC<IBeneficiaryCardProps> = (props) => {
  const {
    variant,
    name,
    accountNumber,
    bankIcon,
    avatar,
    showNominalField,
    onChangeNominal,
    nominalValue,
    key,
    inputRef,
    avatarImgComponent,
    bankIconComponent,
  } = props;

  const [nominalString, setNominalString] = useState("");

  const backgroundColor = useMemo(() => {
    switch (variant) {
      case BeneficiaryCardType.blue:
        return "sapphireBlue.Minus3";

      case BeneficiaryCardType.red:
        return "crimsonRed.Minus3";

      case BeneficiaryCardType.green:
        return "jadeGreen.Minus3";

      default:
        return "goldenYellow.Minus3";
    }
  }, [variant]);

  const onChangeText = useCallback(
    (text: string) => {
      const cleanText = removeNonNumeric(text);
      const value = addThousandSeparator(cleanText);
      onChangeNominal?.(cleanText);
      setNominalString(value);
    },
    [onChangeNominal]
  );

  useEffect(() => {
    onChangeText(`${nominalValue}`);
  }, [nominalValue, onChangeText]);

  const onRemoveNominalValue = useCallback(() => {
    setNominalString("");
    onChangeNominal?.("");
  }, [onChangeNominal]);

  return (
    <View
      position="relative"
      bg="neutral.White"
      overflow="hidden"
      rounded="2xl"
    >
      <VStack
        bg={backgroundColor as ColorType}
        rounded="2xl"
        position="relative"
        overflow="hidden"
      >
        <HStack
          p="4"
          py="51.5"
          alignItems="center"
          space="4"
          position="relative"
          zIndex="1"
        >
          {avatarImgComponent ? (
            avatarImgComponent
          ) : (
            <Image
              key={key}
              w="72px"
              h="72px"
              rounded={"full"}
              bg="white"
              source={avatar}
              alt={"image avatar"}
            />
          )}

          <VStack>
            <Text
              fontSize="lg"
              fontWeight="bold"
              textTransform="capitalize"
              pr={20}
            >
              {name}
            </Text>
            <HStack alignItems="center" space="5px">
              <Box
                p="2.18px"
                overflow="hidden"
                w="6"
                h="6"
                rounded="8px"
                bg="white"
              >
                {bankIconComponent ? (
                  bankIconComponent
                ) : (
                  <Image
                    w="full"
                    h="full"
                    resizeMode="contain"
                    key={key}
                    source={bankIcon}
                    alt="image bankIcon"
                  />
                )}
              </Box>
              <Text fontSize="xs">{accountNumber}</Text>
            </HStack>
          </VStack>
        </HStack>

        <Image
          position="absolute"
          top="-10px"
          resizeMode="cover"
          w="full"
          zIndex="0"
          h="130%"
          source={images_swirl_white}
          alt={"images_swirl_white"}
        />
      </VStack>
      {showNominalField && (
        <VStack p="4">
          <Text>Nominal</Text>
          <HStack alignItems="center">
            <Text fontWeight="bold" fontSize="md">
              Rp
            </Text>
            <Input
              ref={inputRef}
              value={nominalString}
              w="full"
              fontFamily="proxima"
              p="0"
              fontWeight="bold"
              fontSize="md"
              borderWidth={0}
              rounded="none"
              onChangeText={onChangeText}
              _focus={{
                background: "#fff",
              }}
              _hover={{
                background: "#fff",
              }}
            />
            <IconButton
              onPress={onRemoveNominalValue}
              variant="neutral"
              bg="neutral.BorderAndDisabled"
              w="4"
              h="4"
              p="0"
              _icon={{
                color: "neutral.SecondaryText",
              }}
              icon={<CloseMedium size="4" />}
            />
          </HStack>
        </VStack>
      )}
    </View>
  );
};

export default BeneficiaryCard;