import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
import Button from "@components/Button";
import Input from "@components/Input";
import TransactionInformationsItem from "@components/TransactionInformationsItem";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
import useTransactionsHistory, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
import { LOG } from "@logger";
import Card from "@re-card";
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();

	const { showModal } = useModalsManagerContext();

	return (
		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
			<BarWithBeasyAndNotificationsIcon />

			<Card variant={"curvedTopContainer"} padding={"s"} height={"100%"} mt={"m"}>
				{showFiltersModal && (
					<FiltersModal
						setShowFiltersModal={setShowFiltersModal}
						setOperatorsFilter={setOperatorsFilter}
						operatorsFilter={operatorsFilter}
					/>
				)}
				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
				<Box px={"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)}
							onPress={() =>
								showModal(
									<FiltersModal
										setShowFiltersModal={setShowFiltersModal}
										setOperatorsFilter={setOperatorsFilter}
										operatorsFilter={operatorsFilter}
									/>,
								)
							}
						/>
					</Box>
				</Box>
				<ScrollView
					// style={{ backgroundColor: "red" }}
					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
					contentContainerStyle={{
						gap: 10,
						padding: 5,
						// 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>
			</Card>
		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
	);
};

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 { closeModal } = useModalsManagerContext();

	const saveFilters = useCallback(() => {
		saveOperatorsFilters();
		setShowFiltersModal(false);
		closeModal();
	}, [saveOperatorsFilters, setShowFiltersModal, closeModal]);

	return (
		<Card variant={"absoluteForegroundScreenSizedTransparentCard"}>
			<Box
				backgroundColor={"white"}
				width={"90%"}
				// height={"70%"}
				maxHeight={"80%"}
				borderRadius={10}
				p={"m"}
				flexDirection={"column"}
				style={{ margin: "auto" }}
			>
				<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={() => {
							closeModal();
							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: 20 }}>
					<Button
						variant={"full"}
						label={"Valider"}
						textVariants={"white"}
						onPress={saveFilters}
					/>
				</Box>
			</Box>
		</Card>
	);
};