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) => {
	const dateObject = Date.parse(date);
	return (
		<Box
			width={"100%"}
			py={"s"}
			px={"s"}
			flexDirection={"row"}
			gap={"s"}
			borderRadius={10}
			borderColor={"lightGray"}
			shadowColor={"black"}
			shadowOffset={{ width: 0, height: 0 }}
			shadowOpacity={0.5}
			backgroundColor={"white"}
			justifyContent={"space-between"}
		>
			<Box flexDirection={"row"} flex={1} gap={"s"}>
				<Box width={50} height={50} borderRadius={10} overflow={"hidden"}>
					<PaymentOption paymentMethod={paymentType} onPress={() => {}} />
				</Box>
				<Box height={50} flex={1}>
					<Text variant={"black"}>{reference}</Text>
					<Text>{moment(dateObject).fromNow()}</Text>
				</Box>
			</Box>

			<Box height={50}>
				<AmountColorRenderer status={status} amount={amount} />
			</Box>
		</Box>
	);
};

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

const AmountWrapper = ({
	color,
	children,
}: { color: "secondary" | "softYellow" | "softRed"; children: React.ReactNode }) => {
	return (
		<Box backgroundColor={color} px={"m"} py={"xs"} borderRadius={7}>
			<Text variant={"white"} fontWeight={"bold"}>
				{children} F
			</Text>
		</Box>
	);
};

export default TransactionInformationsItem;