import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
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 { SafeAreaView } from "react-native-safe-area-context";

const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
	({ navigation }) => {
		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"}
								style={{ flexWrap: "wrap" }}
								gap={"s"}
								justifyContent={"space-between"}
							>
								{/* Payment Modes */}
								<Box style={{ width: "48%", height: "26%" }}>
									<PaymentOption
										onPress={() =>
											navigation.navigate("paymentAmountInputScreen")
										}
										paymentMethod={"OrangeMoney"}
									/>
								</Box>
								<Box style={{ width: "48%", height: "26%" }}>
									<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
								</Box>

								<Box style={{ width: "48%", height: "26%" }}>
									<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
								</Box>

								<Box style={{ width: "48%", height: "26%" }}>
									<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
								</Box>

								<Box style={{ width: "48%", height: "26%" }}>
									<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
								</Box>
							</Box>
						</Box>
					</Box>
				</SafeAreaView>
			</BackgroundGreenWhiteContentArea>
		);
	};

export default HomePageWithPaymentOptions;