import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import getPaymentTypes from "@/utils/requests/getPaymentTypes";
import BalanceContainer from "@components/BalanceContainer";
import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
import PaymentOption from "@components/PaymentOption";
import Box from "@components/bases/Box";
import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
import { LOG } from "@logger";
import Card from "@re-card";
import Text from "@re-text";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import { Dimensions } from "react-native";

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

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

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

		log.info(
			"payment types to render",
			paymentTypesWithActiveStatus.map((paymentType) => paymentType.code),
		);

		return (
			<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
				<Box style={{ height: "100%" }} flexDirection={"column"}>
					<BarWithBeasyAndNotificationsIcon />
					<Card
						variant={"curvedTopContainer"}
						height={Dimensions.get("window").height / 2 + 150}
						style={{ marginTop: "auto" }}
						padding={"l"}
					>
						<Box position={"relative"} top={-120}>
							<Box alignSelf={"center"}>
								<BalanceContainer balance={78000} label="Total des ventes" />
							</Box>

							<Box marginVertical={"l"}>
								<Text fontSize={20} fontWeight={"bold"}>
									Types de paiement
								</Text>
							</Box>

							<Box
								flex={1}
								flexDirection={"row"}
								justifyContent={"space-between"}
								flexWrap={"wrap"}
								rowGap={"m"}
							>
								{isLoading && (
									<Box flex={1}>
										<Text textAlign={"center"}>
											Chargement des méthodes de paiement...
										</Text>
									</Box>
								)}
								{!isLoading &&
									!error &&
									paymentTypesWithActiveStatus.map((paymentType) => (
										<PaymentOptionContainer key={paymentType.id}>
											<PaymentOption
												onPress={() =>
													navigation.navigate(
														"paymentAmountInputScreen",
														{
															paymentType: paymentType.code,
														},
													)
												}
												paymentMethod={paymentType.code}
											/>
										</PaymentOptionContainer>
									))}
							</Box>
						</Box>
					</Card>
				</Box>
			</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
		);
	};

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}
			borderRadius={30}
			overflow={"hidden"}
		>
			{children}
		</Box>
	);
};
