import { getTransactionsHistory } from "@/utils/requests/transactions";
import TransactionInformationsItem from "@components/TransactionInformationsItem";
import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
import Box from "@components/bases/Box";
import { LOG } from "@logger";
import { useQuery } from "@tanstack/react-query";
import { ScrollView } from "react-native";

const log = LOG.extend("TransactionHistoryScreen");

const TransactionHistoryScreen = () => {
	log.verbose("TransactionHistoryScreen");

	const { data, isLoading, error } = useQuery({
		queryKey: ["transactionsHistory"],
		queryFn: getTransactionsHistory,
	});

	console.info("Data", data);

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<ScrollView
				style={{ flex: 1, gap: 100, flexDirection: "column" }}
				showsVerticalScrollIndicator={false}
			>
				{data?.map((transaction) => (
					// <Text key={transaction.reference}>{transaction.reference}</Text>
					<Box key={transaction.reference} mb={"s"}>
						<TransactionInformationsItem
							key={transaction.reference}
							paymentType={transaction.type_paiement_label}
							reference={transaction.reference}
							amount={transaction.montant}
							date={transaction.date}
							status={transaction.status}
						/>
					</Box>
				))}
			</ScrollView>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default TransactionHistoryScreen;