/** biome-ignore-all lint/style/useNamingConvention: <For filters to match the codes> */

import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/Button";
import * as Input from "@components/Input";
import * as Modal from "@components/Modal";
import Entypo from "@expo/vector-icons/Entypo";
import Ionicons from "@expo/vector-icons/Ionicons";
import { LOG } from "@logger";
import { FlashList } from "@shopify/flash-list";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { Switch, Text, TouchableOpacity, View } from "react-native";
import { getTransactions } from "@/features/pay/api";
import { TransactionItem } from "@/features/pay/components/TransactionItem";
import type { PaymentTypeCode } from "@/features/pay/types";

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

const TransactionHistoryScreen = () => {
	log.verbose("TransactionHistoryScreen");
	const [showFilterModal, setShowFilterModal] = useState(false);
	const [filters, setFilters] = useState<Record<PaymentTypeCode, boolean>>({
		CB: true,
		FLOOZ: true,
		MTN: true,
		WAVE: true,
		OM: true,
	});
	const [referenceFilter, setReferenceFilter] = useState("");

	const transactionHistoryQuery = useQuery({
		queryKey: ["transactionsHistory"],
		queryFn: getTransactions,
	});

	const transactions = transactionHistoryQuery.data?.data.results
		? transactionHistoryQuery.data?.data?.results.filter(
				(transaction) =>
					filters[transaction.type_paiement_label] &&
					transaction.reference.includes(referenceFilter),
			)
		: [];

	return (
		<BarnoinPayBackground style={[g.gap_5xl]}>
			<View style={[g.px_lg, g.flex_row, g.justify_between]}>
				<BeasyLogoIcon />
				<Ionicons name="notifications" size={24} color="black" />
			</View>

			<View
				style={[
					g.px_xl,
					g.pt_xl,
					g.flex_1,
					g.gap_lg,
					{ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 },
				]}
			>
				<View style={[g.flex_row, g.gap_sm, g.align_center, g.w_full]}>
					<Input.Container style={[g.flex_1]}>
						<Input.FieldContainer>
							<Input.Field
								placeholder="Recherche par référence"
								placeholderTextColor={"gray"}
								onChangeText={setReferenceFilter}
							/>
						</Input.FieldContainer>
					</Input.Container>
					<TouchableOpacity
						onPress={() => setShowFilterModal(true)}
						style={[
							g.justify_center,
							g.align_center,
							g.p_md,
							g.rounded_md,
							{ backgroundColor: "#e8e8e9ff" },
						]}
					>
						<Ionicons name="filter" size={24} color="black" />
					</TouchableOpacity>
				</View>

				{!transactions ? (
					<Text style={[g.text_center]}>Aucune transaction n'a été trouvée</Text>
				) : (
					<FlashList
						data={transactions}
						keyExtractor={(item) => item.reference}
						estimatedItemSize={75}
						bounces={false}
						renderItem={({ item }) => (
							<View style={[g.p_sm]} key={item.reference}>
								<TransactionItem transaction={item} />
							</View>
						)}
					/>
				)}
			</View>

			{/* FILTER MODAL */}

			<Modal.RnModal
				visible={showFilterModal}
				style={{ backgroundColor: "rgba(0, 0, 0, 0.25)", flex: 1 }}
			>
				<Modal.OuterView
					style={[
						g.p_md,
						g.shadow_elevated,
						{
							backgroundColor: "white",
							width: "90%",
							height: "60%",
						},
					]}
				>
					<View style={[g.p_md, g.flex_1, g.gap_sm]}>
						<View style={[g.flex_row, g.justify_between, g.align_center]}>
							<Text style={[g.font_bold, g.text_2xl]}>Paramétrage du filtre</Text>
							<Entypo name="cross" size={24} color="black" />
						</View>
						<Text style={[g.font_bold, g.text_lg]}>Opétareurs</Text>
						<View style={[g.px_md, { backgroundColor: "#e8e8e9ff" }]}>
							<View
								style={[
									g.flex_row,
									g.justify_between,
									g.align_center,
									g.py_md,
									{ borderBottomColor: "white", borderBottomWidth: 1 },
								]}
							>
								<Text style={[g.font_bold]}>Orange Money</Text>
								<Switch
									trackColor={{ false: "#767577", true: "#167a00ff" }}
									value={filters.OM}
									onValueChange={(checked) =>
										setFilters((prev) => ({ ...prev, OM: checked }))
									}
								/>
							</View>
							<View
								style={[
									g.flex_row,
									g.justify_between,
									g.align_center,
									g.py_md,
									{ borderBottomColor: "white", borderBottomWidth: 1 },
								]}
							>
								<Text style={[g.font_bold]}>MTN Money</Text>
								<Switch
									trackColor={{ false: "#767577", true: "#167a00ff" }}
									value={filters.MTN}
									onValueChange={(checked) =>
										setFilters((prev) => ({ ...prev, MTN: checked }))
									}
								/>
							</View>
							<View
								style={[
									g.flex_row,
									g.justify_between,
									g.align_center,
									g.py_md,
									{ borderBottomColor: "white", borderBottomWidth: 1 },
								]}
							>
								<Text style={[g.font_bold]}>Flooz Money</Text>
								<Switch
									trackColor={{ false: "#767577", true: "#167a00ff" }}
									value={filters.FLOOZ}
									onValueChange={(checked) =>
										setFilters((prev) => ({ ...prev, FLOOZ: checked }))
									}
								/>
							</View>
							<View
								style={[
									g.flex_row,
									g.justify_between,
									g.align_center,
									g.py_md,
									{ borderBottomColor: "white", borderBottomWidth: 1 },
								]}
							>
								<Text style={[g.font_bold]}>Wave</Text>
								<Switch
									trackColor={{ false: "#767577", true: "#167a00ff" }}
									value={filters.WAVE}
									onValueChange={(checked) =>
										setFilters((prev) => ({ ...prev, WAVE: checked }))
									}
								/>
							</View>
							<View style={[g.flex_row, g.justify_between, g.align_center, g.py_md]}>
								<Text style={[g.font_bold]}>Carte Bancaire</Text>
								<Switch
									trackColor={{ false: "#767577", true: "#167a00ff" }}
									value={filters.CB}
									onValueChange={(checked) =>
										setFilters((prev) => ({ ...prev, CB: checked }))
									}
								/>
							</View>
						</View>
						<Button.Container onPress={() => setShowFilterModal(false)}>
							<Button.Label>Valider</Button.Label>
						</Button.Container>
					</View>
				</Modal.OuterView>
			</Modal.RnModal>
		</BarnoinPayBackground>
	);
};

export default TransactionHistoryScreen;