import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { images } from "@styles/Commons";
import * as LocalAuthentication from "expo-local-authentication";
import { useState } from "react";
import { Image, TouchableOpacity } from "react-native";

type Props = { balance: number; label: string };

const BalanceContainer = ({ label, balance }: Props) => {
	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 (
		<Box
			position={"relative"}
			width={300}
			height={130}
			alignItems={"center"}
			justifyContent={"center"}
		>
			<Box
				width={300}
				height={130}
				borderRadius={10}
				overflow={"hidden"}
				position={"absolute"}
			>
				<Image
					source={require("../../assets/balance_container.png")}
					style={images.cover}
				/>
			</Box>

			<Box alignItems={"center"} gap={"s"}>
				<TouchableOpacity onPress={handleLocalAuthentication}>
					<Box height={50} alignItems={"center"} justifyContent={"center"}>
						{showBalance ? (
							<Text fontSize={30} variant={"black"}>
								{balance}
							</Text>
						) : (
							<Box width={40} height={40}>
								<Image
									source={require("../../assets/eye_hidden.png")}
									style={images.contain}
								/>
							</Box>
						)}
					</Box>
				</TouchableOpacity>

				<Text color={"gray"}>{label}</Text>
			</Box>
		</Box>
	);
};

export default BalanceContainer;