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

const log = LOG.extend("NumberAndOtpForPaymentScreen");

const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
	"numberAndOtpForPaymentScreen"
> = ({ navigation }) => {
	console.debug("NumberAndOtpForPaymentScreen");
	return (
		<BackgroundGreenWhiteContentArea>
			<SafeAreaView>
				<Box style={{ height: "100%", width: "100%" }}>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
					>
						<BeasyLogoIcon />
						<GoBackIconButton onPress={() => navigation.goBack()} />
					</Box>
					<Box height={122} alignItems={"center"} justifyContent={"center"}>
						<Text color={"white"}>Montant à payer</Text>
						<Text color={"white"} fontSize={30}>
							78000
						</Text>
					</Box>
					<Box p={"l"}>
						<Box width={100} height={70} mb={"l"}>
							<PaymentOption onPress={() => {}} paymentMethod={"OM"} />
						</Box>
						<Box mb={"l"}>
							<Input
								label="Entrez le numero"
								keyboardType="numeric"
								textVariants={"black"}
							/>
							<Input label="Code OTP" keyboardType="numeric" textVariants={"black"} />
						</Box>
						<Button
							onPress={() => {}}
							variant={"full"}
							textVariants={"primary"}
							label="Confirmer"
						/>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundGreenWhiteContentArea>
	);
};

export default NumberAndOtpForPaymentScreen;
