import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import getPaymentTypes from "@/utils/requests/getPaymentTypes";
import BalanceContainer from "@components/BalanceContainer";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import NotificationIconButton from "@components/NotificationIconButton";
import PaymentOption from "@components/PaymentOption";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import { Dimensions } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
	({ navigation }) => {
		const { data, isLoading, error } = useQuery({
			queryKey: ["paymentTypes"],
			queryFn: getPaymentTypes,
			enabled: true,
		});

		// getting valid payments supported
		const paymentTypesWithActiveStatus = useMemo(() => {
			console.log("Filtering payment types");
			const paymentTypes = data?.results || [];
			return paymentTypes.filter((paymentType) => paymentType.etat === true);
		}, [data]);

		console.log("paymentTypesToRender", paymentTypesWithActiveStatus);

		return (
			<BackgroundGreenWhiteContentArea>
				<SafeAreaView>
					<Box style={{ height: "100%" }}>
						<Box
							px={"l"}
							flexDirection={"row"}
							justifyContent={"space-between"}
							alignItems={"center"}
						>
							<BeasyLogoIcon />
							<NotificationIconButton />
						</Box>
						<Box height={150} alignItems={"center"} justifyContent={"center"}>
							<BalanceContainer balance={78000} label="Total des ventes" />
						</Box>
						<Box flex={1} p={"l"}>
							<Box height={100}>
								<Text fontSize={20} fontWeight={"bold"}>
									Méthode de paiement
								</Text>
							</Box>
							{/* <Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}> */}
							<Box
								flex={1}
								flexDirection={"row"}
								justifyContent={"space-between"}
								flexWrap={"wrap"}
								rowGap={"m"}
							>
								{paymentTypesWithActiveStatus.map((paymentType) => (
									<PaymentOptionContainer key={paymentType.id}>
										<PaymentOption
											onPress={() =>
												navigation.navigate("paymentAmountInputScreen")
											}
											paymentMethod={paymentType.code}
										/>
									</PaymentOptionContainer>
								))}
							</Box>
						</Box>
					</Box>
				</SafeAreaView>
			</BackgroundGreenWhiteContentArea>
		);
	};

export default HomePageWithPaymentOptions;

const screenWidth = Dimensions.get("window").width;
const paymentOptionCardWidth = screenWidth / 2 - 30;
const paymentOptionCardHeight = paymentOptionCardWidth * 0.65;
const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
	return (
		<Box width={paymentOptionCardWidth} height={paymentOptionCardHeight}>
			{children}
		</Box>
	);
};