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

export enum PaymentMethods {
	OrangeMoney = 1,
	MtnMoney = 2,
	MoobMoney = 3,
	WaveMoney = 4,
	VisaCard = 5,
}

type PaymentOptions = "OrangeMoney" | "MtnMoney" | "MoovMoney" | "WaveMoney" | "VisaCard";

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"}>
			{children}
		</Box>
	);
};

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

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

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

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

const PaymentOption = ({ onPress, paymentMethod }: Props) => {
	return (
		<TouchableOpacity style={{ width: "50%", height: "26%" }} onPress={onPress}>
			{paymentMethod === "OrangeMoney" && <OrangeMoney />}
			{paymentMethod === "MtnMoney" && <MtnMoney />}
			{paymentMethod === "MoovMoney" && <MoovMoney />}
			{paymentMethod === "WaveMoney" && <WaveMoney />}
			{paymentMethod === "VisaCard" && <VisaCard />}
		</TouchableOpacity>
	);
};

const OrangeMoney = () => {
	return (
		<Box height={50} p={"s"} style={{ width: "100%", height: "100%" }} overflow={"hidden"}>
			<Image
				source={require("../../assets/operators/orange_money.png")}
				style={images.cover}
			/>
		</Box>
	);
};

export default PaymentOption;