import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/Button";
import CheckIcon from "@components/icons/CheckIcon";
import { AntDesign } from "@expo/vector-icons";
import { LOG } from "@logger";
import { Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import type { MainStackScreenComponentProps } from "@/navigations/types";

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

const PaymentResultScreen: MainStackScreenComponentProps<"paymentResultScreen"> = ({
	route,
	navigation,
}) => {
	const insets = useSafeAreaInsets();
	log.debug("insets", insets);
	return (
		<BarnoinPayBackground style={[g.gap_lg]}>
			<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.flex_1]}>
				<View
					style={[
						g.flex_1,
						g.gap_lg,
						g.p_lg,
						{
							backgroundColor: "white",
							borderTopLeftRadius: 20,
							borderTopRightRadius: 20,
						},
					]}
				>
					<View style={[g.self_center]}>
						<CheckIcon />
					</View>
					<Text style={[g.text_center]}>Transactions effectué avec succès !</Text>

					<Button.Container style={[g.self_center, { width: 200 }]}>
						<Button.Label>Imprimer le réçu</Button.Label>
					</Button.Container>

					<View style={[g.rounded_lg, g.p_lg, { backgroundColor: "#eeeef1ff" }]}>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000", borderBottomWidth: 1 },
							]}
						>
							<Text style={[g.font_bold]}>Caisse</Text>
							<Text>00147C</Text>
						</View>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000", borderBottomWidth: 1 },
							]}
						>
							<Text style={[g.font_bold]}>Reference</Text>
							<Text>CP...</Text>
						</View>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000", borderBottomWidth: 1 },
							]}
						>
							<Text style={[g.font_bold]}>Mode de paiement</Text>
							<Text>Orange</Text>
						</View>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000", borderBottomWidth: 1 },
							]}
						>
							<Text style={[g.font_bold]}>Infos client</Text>
							<Text>Dogeless Miso</Text>
						</View>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000", borderBottomWidth: 1 },
							]}
						>
							<Text style={[g.font_bold]}>Montant</Text>
							<Text>10</Text>
						</View>
						<View
							style={[
								g.flex_row,
								g.justify_between,
								g.p_md,
								{ borderBottomColor: "#000" },
							]}
						>
							<Text style={[g.font_bold]}>N° Client</Text>
							<Text>Dogeless Misso</Text>
						</View>
					</View>
				</View>
			</View>
		</BarnoinPayBackground>
	);
};

export default PaymentResultScreen;