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

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

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

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

	console.info("Data", data);

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<ScrollView
				refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
				contentContainerStyle={{
					gap: 10,
					padding: 10,
					marginTop: 10,
					paddingBottom: 30,
					flexDirection: "column",
				}}
				showsVerticalScrollIndicator={false}
			>
				{data?.map((transaction) => (
					<TransactionInformationsItem
						key={transaction.reference}
						paymentType={transaction.type_paiement_label}
						reference={transaction.reference}
						amount={transaction.montant}
						date={transaction.date}
						status={transaction.status}
					/>
				))}
			</ScrollView>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default TransactionHistoryScreen;