import React, { useCallback, useEffect, useMemo, useState } from "react";
import {
  Flex,
  HStack,
  IconButton,
  Image,
  Input,
  Text,
  View,
  VStack,
} from "native-base";
import type { ColorType } from "native-base/lib/typescript/components/types";
import type { ImageSourcePropType } from "react-native";
import { CloseMedium } from "../../../../icons/navigation";
import { addThousandSeparator, removeNonNumeric } from "../../../../utils";

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

interface ITransactionReviewCard {
  variant: keyof typeof TransactionReviewCardType;
  name: string;
  accountNumber: string;
  avatar: ImageSourcePropType;
  bankIcon: ImageSourcePropType;
  showNominalField?: boolean;
  nominalValue?: string | number;
  onChangeNominal?: (text: string) => void;
}

export const TransactionReviewCard: React.FC<ITransactionReviewCard> = (
  props
) => {
  const {
    variant,
    name,
    accountNumber,
    bankIcon,
    avatar,
    showNominalField,
    onChangeNominal,
    nominalValue,
  } = props;

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

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

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

      case TransactionReviewCardType.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"
      maxWidth="343"
      bg="neutral.White"
      overflow="hidden"
      rounded="2xl"
    >
      <HStack
        bg={backgroundColor as ColorType}
        p="4"
        alignItems="center"
        space="2"
        position="relative"
        overflow="hidden"
      >
        <Image
          resizeMode="center"
          w="53px"
          h="53px"
          bg="neutral.White"
          rounded="full"
          position="relative"
          zIndex="1"
          source={avatar}
        />

        <Flex h="53px" justifyContent="space-evenly">
          <Text fontSize="sm" fontWeight="bold" position="relative" zIndex="1">
            {name}
          </Text>
          <HStack
            alignItems="center"
            space="5px"
            position="relative"
            zIndex="1"
          >
            <Image
              resizeMode="center"
              w="30px"
              h="30px"
              bg="neutral.White"
              rounded="6"
              source={bankIcon}
            />
            <Text fontSize="xs">{accountNumber}</Text>
          </HStack>
        </Flex>

        {/* <Image
          position="absolute"
          top="-10px"
          resizeMode="cover"
          w="100%"
          zIndex="0"
          h="130%"
          source={SwirlBackground}
        /> */}
      </HStack>
      {showNominalField && (
        <VStack p="4">
          <Text>Nominal</Text>
          <HStack alignItems="center">
            <Text fontWeight="bold" fontSize="md">
              Rp
            </Text>
            <Input
              value={nominalString}
              w="full"
              fontFamily="proxima"
              p="0"
              fontWeight="bold"
              fontSize="md"
              borderWidth={0}
              rounded="none"
              onChangeText={onChangeText}
              _focus={{
                background: "none",
              }}
              _hover={{
                background: "none",
              }}
            />
            <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 TransactionReviewCard;