import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/ButtonNew";
import * as Input from "@components/InputNew";
import AntDesign from "@expo/vector-icons/AntDesign";
import { LOG } from "@logger";
import { Text, View } from "react-native";
import PaymentType from "@/features/pay/components/PaymentType";
import type { PaymentStackScreenComponentProps } from "@/navigations/types";

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

const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
	"numberAndOtpForPaymentScreen"
> = ({ navigation, route }) => {
	return (
		<BarnoinPayBackground style={[g.flex_col, g.gap_lg, g.relative]}>
			<View style={[g.px_lg, g.flex_row, g.align_center, g.justify_between]}>
				<BeasyLogoIcon />
				<AntDesign
					name="arrowleft"
					size={24}
					color="black"
					onPress={() => navigation.goBack()}
				/>
			</View>

			<View style={[g.px_lg, g.align_center, g.justify_center]}>
				<Text style={[g.font_bold, g.text_2xl, { color: "white" }]}>Montant à payé </Text>
				<Text style={[g.font_bold, g.text_2xl, { color: "white" }]}>
					{route.params.amount}
				</Text>
			</View>

			<View
				style={[
					g.flex_1,
					g.p_5xl,
					g.gap_5xl,
					{ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 },
				]}
			>
				<PaymentType type={route.params.paymentType.code} />
				<Input.Container>
					<Input.Header>Entrer le numéro</Input.Header>
					<Input.FieldContainer>
						<Input.Field keyboardType="number-pad" />
					</Input.FieldContainer>
				</Input.Container>

				<Input.Container>
					<Input.Header>Code OTP</Input.Header>
					<Input.FieldContainer>
						<Input.Field keyboardType="number-pad" />
					</Input.FieldContainer>
				</Input.Container>

				<Button.Container>
					<Button.Label>Confirmer</Button.Label>
				</Button.Container>
			</View>
		</BarnoinPayBackground>
	);
};

export default NumberAndOtpForPaymentScreen;