import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import BalanceContainer from "@components/BalanceContainer";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import GoBackIconButton from "@components/GoBackIconButton";
import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box";
import { SafeAreaView } from "react-native-safe-area-context";

const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
	route,
	navigation,
}) => {
	const { paymentType } = route.params;

	console.log("Payment type :: {}", paymentType);

	return (
		<BackgroundGreenWhiteContentArea>
			<SafeAreaView>
				<Box style={{ height: "100%", width: "100%" }}>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
						mb={"l"}
					>
						<BeasyLogoIcon />
						<GoBackIconButton onPress={() => navigation.goBack()} />
					</Box>
					<Box height={150} alignItems={"center"} justifyContent={"center"}>
						<BalanceContainer balance={78000} label="Total des ventes" />
					</Box>
					<Box p={"l"} paddingTop={"x64"}>
						<Box mb={"xl"}>
							<Input
								label="Entrez le montant"
								autoFocus={true}
								keyboardType="numeric"
							/>
						</Box>
						<Button
							onPress={() => navigation.navigate("numberAndOtpForPaymentScreen")}
							variant={"full"}
							textVariants={"primary"}
							label="Confirmer"
						/>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundGreenWhiteContentArea>
	);
};

export default PaymentAmountInputScreen;