import Input from "@components/Input";
import TransactionInformationsItem from "@components/TransactionInformationsItem";
import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
import Box from "@components/bases/Box";
import useTransactionsHistory from "@hooks/useTransactionsHistory";
import { LOG } from "@logger";
import { RefreshControl, ScrollView } from "react-native";

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

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

	const {
		transactionsHistory: data,
		isLoading,
		error,
		refetch,
		setReferenceFilter,
	} = useTransactionsHistory();

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<>
				<Box px={"m"} mt={"m"}>
					<Input label={"Reference"} onChangeText={setReferenceFilter} />
				</Box>
				<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.transaction_id}
							paymentType={transaction.type_paiement_label}
							reference={transaction.reference}
							amount={transaction.montant}
							date={transaction.date}
							status={transaction.status}
						/>
					))}
				</ScrollView>
			</>
		</BackgroundWithBeasyIconAndWhiteContentArea>
	);
};

export default TransactionHistoryScreen;