import { asp as g } from "@asp/asp";
import { Balance } from "@components/Balance";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Ionicons from "@expo/vector-icons/Ionicons";
import { LOG } from "@logger";
import { useQuery } from "@tanstack/react-query";
import { Text, View } from "react-native";
import { getPaymentTypes } from "@/features/pay/api";
import PaymentType from "@/features/pay/components/PaymentType";
import type { PaymentStackScreenComponentProps } from "@/navigations/types";

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

const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<
	"homePageWithPaymentOptions"
> = ({ navigation }) => {
	log.debug("HomePageWithPaymentOptions");
	const paymentTypesQuery = useQuery({
		queryKey: ["paymentTypes"],
		queryFn: getPaymentTypes,
	});

	const paymentTypes = paymentTypesQuery.isSuccess
		? Object.keys(paymentTypesQuery.data.data.results)
				.map((key) => paymentTypesQuery.data.data.results[key])
				.filter((item) => item.etat === true)
		: [];

	return (
		<BarnoinPayBackground style={[g.flex_col, g.relative]}>
			<View style={[g.px_lg, g.flex_row, g.justify_between]}>
				<BeasyLogoIcon />
				<Ionicons name="notifications" size={24} color="black" />
			</View>

			<View
				style={[
					g.absolute,
					g.z_10,
					g.align_center,
					g.justify_center,
					g.w_full,
					{ top: 120 },
				]}
			>
				<Balance amount={0} />
			</View>

			<View
				style={[
					g.px_lg,
					g.pb_lg,
					g.gap_lg,
					{
						backgroundColor: "white",
						height: "80%",
						marginTop: "auto",
						borderTopRightRadius: 30,
						borderTopLeftRadius: 30,
						paddingTop: 150,
					},
				]}
			>
				<Text style={[g.text_2xl, g.font_bold]}>Types de paiement</Text>
				<View style={[g.flex_1, g.flex_wrap, g.flex_row, g.gap_lg, g.justify_between]}>
					{paymentTypes.map((paymentType) => {
						return (
							<PaymentType
								onPress={() => {
									navigation.navigate("paymentAmountInputScreen", {
										paymentType,
									});
								}}
								key={paymentType.reference}
								style={[{ width: "47%" }]}
								type={paymentType.code}
							/>
						);
					})}
				</View>
			</View>
		</BarnoinPayBackground>
	);
};

export default HomePageWithPaymentOptions;