import Button from "@components/Button";
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, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
import { LOG } from "@logger";
import theme from "@themes/Theme";
import { useCallback, 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,
		operatorsFilter,
		setOperatorsFilter,
	} = useTransactionsHistory();

	return (
		<BackgroundWithBeasyIconAndWhiteContentArea>
			<>
				{showFiltersModal && (
					<FiltersModal
						setShowFiltersModal={setShowFiltersModal}
						setOperatorsFilter={setOperatorsFilter}
						operatorsFilter={operatorsFilter}
					/>
				)}
				{/* <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>>;
	// biome-ignore lint/style/useNamingConvention: <explanation>
	operatorsFilter: OperatorsFilter;
	// biome-ignore lint/style/useNamingConvention: <explanation>
	setOperatorsFilter: React.Dispatch<React.SetStateAction<OperatorsFilter>>;
}
const FiltersModal: React.FC<FiltersModalProps> = ({
	setShowFiltersModal,
	operatorsFilter,
	setOperatorsFilter,
}) => {
	const [filterOm, setFilterOm] = useState(operatorsFilter.OM);
	const [filterMtn, setFilterMtn] = useState(operatorsFilter.MTN);
	const [filterFlooz, setFilterFlooz] = useState(operatorsFilter.FLOOZ);
	const [filterWave, setFilterWave] = useState(operatorsFilter.WAVE);
	const [filterCb, setFilterCb] = useState(operatorsFilter.CB);

	const saveOperatorsFilters = useCallback(() => {
		setOperatorsFilter({
			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
			OM: filterOm,
			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
			MTN: filterMtn,
			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
			FLOOZ: filterFlooz,
			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
			WAVE: filterWave,
			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
			CB: filterCb,
		});
	}, [filterOm, filterMtn, filterFlooz, filterWave, filterCb, setOperatorsFilter]);

	const saveFilters = useCallback(() => {
		saveOperatorsFilters();
		setShowFiltersModal(false);
	}, [saveOperatorsFilters, 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"}
					flexDirection={"column"}
				>
					<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={filterOm}
								onValueChange={setFilterOm}
							/>
						</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={filterMtn}
								onValueChange={setFilterMtn}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							borderBottomWidth={1}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Flooz Money</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={filterFlooz}
								onValueChange={setFilterFlooz}
							/>
						</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={filterWave}
								onValueChange={setFilterWave}
							/>
						</Box>
						<Box
							flexDirection={"row"}
							alignItems={"center"}
							justifyContent={"space-between"}
							borderBottomColor={"white"}
							py={"s"}
						>
							<Text fontWeight={"bold"}>Carte Bancaire</Text>
							<Switch
								trackColor={{ false: "#767577", true: theme.colors.secondary }}
								value={filterCb}
								onValueChange={setFilterCb}
							/>
						</Box>
					</Box>
					<Box style={{ marginTop: "auto" }}>
						<Button
							variant={"full"}
							label={"Valider"}
							textVariants={"white"}
							onPress={saveFilters}
						/>
					</Box>
				</Box>
			</Box>
		</>
	);
};