import Input from "@components/Input";
import TransactionInformationsItem from "@components/TransactionInformationsItem";
import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import useTransactionsHistory from "@hooks/useTransactionsHistory";
import { LOG } from "@logger";
import theme from "@themes/Theme";
import { useState } from "react";
import { RefreshControl, ScrollView, Switch } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

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

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

	const [showFiltersModal, setShowFiltersModal] = useState(false);

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

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<>
				{showFiltersModal && <FiltersModal setShowFiltersModal={setShowFiltersModal} />}
				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
					<Box flex={1}>
						<Input placeholder="Reference" onChangeText={setReferenceFilter} />
					</Box>
					<Box
						height={50}
						backgroundColor={"lightGray"}
						borderRadius={10}
						width={50}
						// justifyContent={"center"}
						alignItems={"center"}
						justifyContent={"center"}
					>
						<Icon
							name="filter"
							size={30}
							color="black"
							onPress={() => setShowFiltersModal(true)}
						/>
					</Box>
				</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;

interface FiltersModalProps {
	setShowFiltersModal: React.Dispatch<React.SetStateAction<boolean>>;
}
const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
	return (
		<>
			{/* Overlay */}
			<Box
				width={"100%"}
				height={"100%"}
				backgroundColor={"black"}
				opacity={0.5}
				position={"absolute"}
				zIndex={10}
				// p={"m"}
			/>

			{/* Content */}

			<Box width={"100%"} height={"100%"} position={"absolute"} zIndex={11} p={"m"}>
				<Box
					backgroundColor={"white"}
					width={"100%"}
					height={"100%"}
					borderRadius={10}
					p={"m"}
				>
					<Box
						justifyContent={"space-between"}
						alignItems={"center"}
						flexDirection={"row"}
						width={"100%"}
					>
						<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
							Paramétrage filtre
						</Text>
						<Icon
							name="close-outline"
							size={30}
							color="black"
							onPress={() => setShowFiltersModal(false)}
						/>
					</Box>

					<Text fontSize={20} fontWeight={"bold"} my={"s"}>
						Opérateurs
					</Text>
					<Box
						width={"100%"}
						backgroundColor={"lightGray"}
						borderRadius={10}
						p={"s"}
						gap={"s"}
					>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Orange Money</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={true}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
							py={"s"}
						>
							<Text fontWeight={"bold"}>MTN Money</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={true}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Moov Money</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={true}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Wave</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={true}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Visa</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={true}
							/>
						</Box>
					</Box>
				</Box>
			</Box>
		</>
	);
};