import type { PaymentCode } from "@/utils/requests/Types";
import moment from "moment";
import "moment/locale/fr";
import PaymentOption from "./PaymentOption";
import Box from "./bases/Box";
import Text from "./bases/Text";

interface Props {
	paymentType: PaymentCode;
	reference: string;
	date: string;
	amount: number;
	status: "SUCCESS" | "INITIATED" | "FAILED";
}

moment.locale("fr");

const TransactionInformationsItem = ({ paymentType, reference, date, amount, status }: Props) => {
	// date = new Date(date);
	const dateObject = Date.parse(date);
	return (
		<Box
			// height={60}
			width={"100%"}
			py={"s"}
			pr={"m"}
			pl={"s"}
			flexDirection={"row"}
			// alignItems={"center"}
			gap={"s"}
			borderWidth={1}
			borderRadius={10}
			borderColor={"lightGray"}
		>
			<Box width={50} height={50} borderRadius={10} overflow={"hidden"}>
				{/* <Image
					source={require("../../assets/operators/orange_money.png")}
					style={images.cover}
				/> */}
				<PaymentOption paymentMethod={paymentType} onPress={() => {}} />
			</Box>
			<Box height={50} flex={1}>
				<Text variant={"black"}>{reference}</Text>
				<Text>{moment(dateObject).fromNow()}</Text>
			</Box>
			<Box style={{ marginLeft: "auto" }} height={50}>
				{/* <Text variant={"softYellow"} fontWeight={"bold"}>
					{amount}
				</Text> */}
				<AmountColorRenderer status={status} amount={amount} />
			</Box>
		</Box>
	);
};

const AmountColorRenderer = ({ status, amount }: { status: string; amount: number }) => {
	if (status === "SUCCESS") {
		return (
			<Text variant={"secondary"} fontWeight={"bold"}>
				{amount}
			</Text>
		);
	}
	if (status === "INITIATED") {
		return (
			<Text variant={"softYellow"} fontWeight={"bold"}>
				{amount}
			</Text>
		);
	}
	return (
		<Text variant={"softRed"} fontWeight={"bold"}>
			{amount}
		</Text>
	);
};

export default TransactionInformationsItem;