import { ForwardMedium } from "../../../../icons/navigation";
import { TopupSpecial } from "../../../../icons/special";
import {
  Flex,
  HStack,
  IconButton,
  Image,
  Text,
  View,
  VStack,
} from "native-base";
import type { InterfaceHStackProps } from "native-base/lib/typescript/components/primitives/Stack/HStack";
import React, { useCallback, useMemo } from "react";

import { Information, Warning } from "../../../../icons/indication";
import Badge from "../../Badge";
import { BalanceCardProps, EmoneyBalanceTypes } from "./types";

export const BalanceCard: React.FC<BalanceCardProps & InterfaceHStackProps> = (
  props
) => {
  const {
    saldoLabel,
    saldoValue,
    rightComponent,
    koinLabel,
    koinValue,
    emoneyStatus,
    onInfoPress,
    emoneyImage,
    emoneyImageProps,
    onFailPressed,
    labelFail,
    onProcessingPressed,
    labelProcessing,
    ...rest
  } = props;

  const isEmoney = useMemo(
    () => ({
      success: emoneyStatus === EmoneyBalanceTypes.success,
      fail: emoneyStatus === EmoneyBalanceTypes.rejected,
      onProgress: emoneyStatus === EmoneyBalanceTypes.on_progress,
    }),
    [emoneyStatus]
  );

  const handleInfoPress = useCallback(() => {
    onInfoPress?.();
  }, [onInfoPress]);

  return (
    <HStack
      bg="neutral.White"
      borderWidth="1px"
      borderColor="neutral.BorderAndDisabled"
      rounded="16"
      p="16px"
      alignItems="center"
      space="16px"
      {...rest}
    >
      <VStack
        borderRightWidth={"1.5px"}
        borderRightColor={"neutral.BorderAndDisabled"}
        pr={"16px"}
        flex={1}
        alignItems={"flex-start"}
      >
        <HStack space={"8px"} alignItems="center">
          <View
            borderRightWidth={isEmoney.success ? "1.5px" : 0}
            borderRightColor={"neutral.BorderAndDisabled"}
            pr={"8px"}
          >
            <Text fontSize={"md"} fontWeight={"medium"} lineHeight={"21px"}>
              {saldoLabel}
            </Text>
          </View>
          {isEmoney.success && (
            <Image
              h="8px"
              w="79px"
              source={emoneyImage}
              {...emoneyImageProps}
            />
          )}
        </HStack>
        <Text fontSize={"lg"} fontWeight={"bold"} lineHeight={"28px"}>
          {saldoValue}
        </Text>
        {isEmoney.success && (
          <HStack space={"8px"} alignItems="center" pt={"8px"}>
            <Text fontSize={"md"} fontWeight={"medium"} lineHeight={"21px"}>
              {`${koinLabel} ${koinValue}`}
            </Text>
            <IconButton
              onPress={handleInfoPress}
              icon={<Information size={"12px"} />}
              _icon={{ color: "neutral.SecondaryText" }}
              variant="neutral"
              bg="neutral.White"
              padding="0px"
            />
          </HStack>
        )}
        {isEmoney.fail && (
          <Badge
            label={labelFail}
            leftIcon={
              <Warning
                backgroundColor="crimsonRed.Minus2"
                color="crimsonRed.Plus1"
                rounded={100}
                size="md"
              />
            }
            onPress={onFailPressed}
            rightIcon={
              <ForwardMedium
                backgroundColor="crimsonRed.Minus2"
                color="crimsonRed.Plus1"
                rounded={100}
                size="md"
              />
            }
            variant="rounded"
            colorScheme="crimsonRed"
            color="crimsonRed.Plus2"
          />
        )}
        {isEmoney.onProgress && (
          <Badge
            label={labelProcessing}
            leftIcon={
              <Information
                backgroundColor="sapphireBlue.Minus2"
                color="sapphireBlue.Main"
                rounded={100}
                size="md"
              />
            }
            onPress={onProcessingPressed}
            rightIcon={
              <ForwardMedium
                backgroundColor="sapphireBlue.Minus2"
                color="sapphireBlue.Main"
                rounded={100}
                size="md"
              />
            }
            variant="rounded"
            colorScheme="sapphireBlue"
            color="sapphireBlue.Plus1"
          />
        )}
      </VStack>
      {rightComponent ? (
        rightComponent
      ) : (
        <Flex alignItems="center">
          <IconButton
            p="0"
            mb="2px"
            variant="unstyled"
            _icon={{ color: "flipOrange.Main" }}
            _pressed={{
              _icon: {
                color: "flipOrange.Plus1",
              },
            }}
            icon={<TopupSpecial size="6" />}
          />
          <Text fontWeight="bold" color="flipOrange.Main">
            Isi Saldo
          </Text>
        </Flex>
      )}
    </HStack>
  );
};

export default BalanceCard;