import { View, Text, Image, TouchableOpacity, Platform } from "react-native";
import React, { useState } from "react";
import Images from "@utils/images";
import styles from "./styles";
import { useAppNavigation } from "@src/utils/navigation";
import { useSelector } from "react-redux";
import {
  appColors,
  appFonts,
  fontSizes,
  windowHeight,
  windowWidth,
} from "@src/themes";
import { WalletEye } from "@src/assets/icons/walletEye";
import { EyeClose, Gift, TopUp } from "@src/utils/icons";
import { WalletEyeClose } from "@src/assets/icons/walletEyeClose";
import { useValues } from "@src/utils/context";

interface BalanceTopupProps {
  balance: number | any;
}

export function BalanceTopup({ balance }: BalanceTopupProps) {
  const { navigate } = useAppNavigation();
  const { translateData } = useSelector((state: any) => state.setting);
  const { zoneValue } = useSelector((state: any) => state.zone);
  const [isVisible, setIsVisible] = useState(true);
  const { isDark } = useValues();
  const rawAmount = `${zoneValue.currency_symbol}${(
    (zoneValue?.exchange_rate ?? 0) * (balance ?? 0)
  ).toFixed(2)}`;
  const maskNumber = (amount: string): string => {
    // remove currency symbol
    const numericPart = amount.replace(/[^0-9.]/g, "");

    // replace digits with *
    const masked = numericPart.replace(/[0-9]/g, "*");

    return `${zoneValue.currency_symbol}${masked}`;
  };

  const maskedAmount = maskNumber(rawAmount);
  const gotoTopUp = () => {
    navigate("TopUpWallet");
  };

  const today = new Date();
  const formattedDate = today.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <View
      style={[
        styles.mainBalance,
        {
          backgroundColor: isDark
            ? appColors.primaryText
            : appColors.whiteColor,
        },
      ]}
    >
      <Image source={Images.cardBackground} style={styles.walletImage} />
      <View style={[styles.subBalance]}>
        <View style={{ marginHorizontal: windowWidth(18) }}>
          <View style={styles.balanceView}>
            <Text style={styles.balanceTitle}>
              {translateData?.availeblance}
            </Text>
          </View>
          <View
            style={{
              flexDirection: "row",
              marginBottom: windowHeight(13),
              alignItems: "center",
            }}
          >
            <Text
              style={[
                styles.totalBalance,
                {
                  fontVariant: ["tabular-nums"],
                  minWidth: 100,
                  textAlign: "center",
                },
              ]}
            >
              {isVisible ? rawAmount : maskedAmount}
            </Text>

            <TouchableOpacity
              onPress={() => setIsVisible((prev) => !prev)}
              style={{
                marginHorizontal: windowWidth(10),
                alignItems: "center",
                justifyContent: "center",
                height: windowHeight(21),
              }}
            >
              {isVisible ? <WalletEye /> : <EyeClose />}
            </TouchableOpacity>
          </View>

          <View
            style={{ flexDirection: "row", justifyContent: "space-between" }}
          >
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={gotoTopUp}
              style={{
                backgroundColor: appColors.whiteColor,
                height: windowHeight(35),
                width: "47.5%",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: windowHeight(40),
              }}
            >
              <TopUp />
              <Text
                style={{
                  color: appColors.blackColor,
                  marginHorizontal: windowWidth(8),
                  fontFamily: appFonts.medium,
                }}
              >
                {translateData.topUp}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.9}
              style={{
                backgroundColor: appColors.whiteColor,
                height: windowHeight(35),
                width: "47.5%",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: windowHeight(40),
                position: "relative",
              }}
            >
              <Image
                source={Images.soon}
                style={{
                  position: "absolute",
                  top: windowHeight(-3),
                  right: windowWidth(-4),
                  width: windowHeight(30),
                  height: windowHeight(32),
                  resizeMode: "contain",
                }}
              />

              <Gift />
              <Text
                style={{
                  color: appColors.blackColor,
                  marginHorizontal: windowWidth(8),
                  fontFamily: appFonts.medium,
                }}
              >
                {translateData.giftCard}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <Text
        style={{
          color: isDark ? appColors.whiteColor : appColors.gray,
          fontFamily: appFonts.regular,
          fontSize: fontSizes.FONT18,
          textAlign: "center",
          marginTop: windowHeight(15),
        }}
      >
        {translateData.balanceasof} {formattedDate}{" "}
      </Text>
    </View>
  );
}
