import { asp as g } from "@asp/asp";
import * as Button from "@components/ButtonNew";
import * as Input from "@components/InputNew";
import * as Modal from "@components/Modal";
import { MaterialIcons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
import { useMutation } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { useRef, useState } from "react";
import { Text, View } from "react-native";
import { useDispatch } from "react-redux";
import { getUserData, login } from "../api";
import { setToken, setUserData } from "../slice";

export const LoginForm = () => {
	const dispatch = useDispatch();

	const usernameRef = useRef<string>("");
	const passwordRef = useRef<string>("");

	const loginMutation = useMutation({
		mutationFn: () => login({ username: usernameRef.current, password: passwordRef.current }),
		onSuccess: (data) => {
			dispatch(setToken(data.data));
			useDataMutation.mutate();
		},
		onError: (error: AxiosError) => {
			setError(JSON.stringify(error.response?.data) || error.message);
		},
	});

	const useDataMutation = useMutation({
		mutationFn: getUserData,
		onSuccess: (data) => {
			dispatch(setUserData(data.data));
		},
	});

	const [error, setError] = useState<string>("");
	return (
		<View
			style={[
				g.p_lg,
				g.gap_lg,
				{
					backgroundColor: "white",
					borderTopLeftRadius: 20,
					borderTopRightRadius: 20,
				},
			]}
		>
			<Text style={[g.text_5xl, g.font_bold]}>Connexion</Text>
			<Text style={{ color: "gray" }}>Bienvenue, vous nous avez manqué !</Text>

			<Input.Container>
				<Input.Header>Addresse e-mail</Input.Header>
				<Input.FieldContainer>
					<Feather name="smartphone" size={24} color="black" />
					<Input.Field onChangeText={(v) => (usernameRef.current = v)} />
				</Input.FieldContainer>
			</Input.Container>

			<Input.Container>
				<Input.Header>Mot de passe</Input.Header>
				<Input.FieldContainer>
					<MaterialIcons name="lock-outline" size={24} color="black" />
					<Input.Field secureTextEntry onChangeText={(v) => (passwordRef.current = v)} />
				</Input.FieldContainer>
			</Input.Container>

			<Button.Container
				style={[g.mt_5xl]}
				isLoading={loginMutation.isPending}
				onPress={() => loginMutation.mutate()}
			>
				<Button.Label style={{ color: "white" }}>Se connecter</Button.Label>
			</Button.Container>
			<Button.Container style={[{ backgroundColor: "#e8e8e9aa" }]}>
				<Button.Label style={{ color: "black" }}>Créer un compte</Button.Label>
			</Button.Container>

			{/* MODAL */}
			<Modal.SafeView>
				<Modal.RnModal visible={!!error} style={{ backgroundColor: "rgba(0, 0, 0, 0.25)" }}>
					<Modal.OuterView
						style={[g.p_md, g.shadow_elevated, { backgroundColor: "white" }]}
					>
						<Text>{error}</Text>

						<Button.Container onPress={() => setError("")}>
							<Button.Label>OK</Button.Label>
						</Button.Container>
					</Modal.OuterView>
				</Modal.RnModal>
			</Modal.SafeView>
		</View>
	);
};