import { images } from "@styles/Commons";
import { Image, TouchableOpacity } from "react-native";
import Box from "./bases/Box";

type PaymentOptions = "ORANGE" | "MTN" | "FLOOZ" | "WAVE" | "CB";

type Props = {
	onPress: () => void;
	paymentMethod: PaymentOptions;
};

const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
	return (
		<Box
			height={50}
			// p={"s"}
			style={{ width: "100%", height: "100%" }}
			overflow={"hidden"}
			backgroundColor={"yellow"}
			borderRadius={30}
		>
			{children}
		</Box>
	);
};

const Orange = () => {
	return (
		<PaymentOptionContainer>
			<Image
				source={require("../../assets/operators/orange_money.png")}
				style={images.cover}
			/>
		</PaymentOptionContainer>
	);
};

const Mtn = () => {
	return (
		<PaymentOptionContainer>
			<Image source={require("../../assets/operators/mtn_money.png")} style={images.cover} />
		</PaymentOptionContainer>
	);
};

const Flooz = () => {
	return (
		<PaymentOptionContainer>
			<Image source={require("../../assets/operators/moov_money.png")} style={images.cover} />
		</PaymentOptionContainer>
	);
};

const Wave = () => {
	return (
		<PaymentOptionContainer>
			<Image source={require("../../assets/operators/wave_money.png")} style={images.cover} />
		</PaymentOptionContainer>
	);
};

const Cb = () => {
	return (
		<PaymentOptionContainer>
			<Image source={require("../../assets/operators/visa_card.png")} style={images.cover} />
		</PaymentOptionContainer>
	);
};

const PaymentOption = ({ onPress, paymentMethod }: Props) => {
	return (
		<TouchableOpacity style={{ width: "100%", height: "100%" }} onPress={onPress}>
			{paymentMethod === "ORANGE" && <Orange />}
			{paymentMethod === "MTN" && <Mtn />}
			{paymentMethod === "FLOOZ" && <Flooz />}
			{paymentMethod === "WAVE" && <Wave />}
			{paymentMethod === "CB" && <Cb />}
		</TouchableOpacity>
	);
};

export default PaymentOption;