import { asp as g } from "@asp/asp";
import Entypo from "@expo/vector-icons/Entypo";
import { ImageBackground } from "expo-image";
import * as LocalAuthentication from "expo-local-authentication";
import { type FC, useState } from "react";
import type { ViewProps } from "react-native";
import { Text, TouchableOpacity } from "react-native";

type BalanceProps = Omit<ViewProps, "children"> & { amount: number };

export const Balance: FC<BalanceProps> = ({ style, amount = 0, ...rest }) => {
	const [showBalance, setShowBalance] = useState(false);

	const handleLocalAuthentication = async () => {
		console.log("handleLocalAuthentication :: start");
		if (showBalance) {
			return setShowBalance(false);
		}
		const result = await LocalAuthentication.authenticateAsync();
		if (result.success) {
			setShowBalance(true);
		}
		console.log("handleLocalAuthentication :: end", result);
	};

	return (
		<ImageBackground
			style={[
				g.p_md,
				g.align_center,
				g.justify_center,
				g.rounded_md,
				g.overflow_hidden,
				{ height: 130, width: 300 },
				style,
			]}
			source={require("@assets/balance_container.png")}
			cachePolicy={"memory-disk"}
			{...rest}
		>
			{showBalance ? (
				<TouchableOpacity onPress={() => setShowBalance(false)}>
					<Text style={[g.font_bold, g.text_2xl]}>{amount}</Text>
				</TouchableOpacity>
			) : (
				<Entypo
					name="eye-with-line"
					size={24}
					color="black"
					onPress={handleLocalAuthentication}
				/>
			)}
		</ImageBackground>
	);
};