dps-webshop/01-frontend/src/helper/navbar/LoginDialog.tsx

import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import i18next from "i18next";
import React, { useEffect, useState } from "react";
import AccountType, { User } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
import { useTranslation } from "react-i18next";

type LoginDialogProps = {
    open: boolean;
    onClose: () => void;
    onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
    loginData: { email: string; password: string };
    setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string, customerId: number }>>;
};

const LoginDialog: React.FC<LoginDialogProps> = ({ open, onClose, loginData, setLoginData, onSubmit }) => {

    const { t } = useTranslation();
    const { login } = useAccount();
    const [showRegister, setShowRegister] = useState(false);
    const [registerData, setRegisterData] = useState<AccountType>({ email: "", password: "", id: 0, customer: { id: 0, name: "", surname: "", address: "", country: "", zip: "" }, langI18n: i18next.language, admin: false });
    const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
    const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung

    useEffect(() => {
        if (open) {
            const active = document.activeElement as HTMLElement | null;
            if (active && typeof active.blur === "function") {
                active.blur();
            }
        }
    }, [open]);



    // useQuery für Login
    const { refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin } = useQuery({
        queryKey: ["submitLogin", loginData],
        queryFn: () => submitLogin(loginData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    const { refetch: refetchAccount } = useQuery({
        queryKey: ["fetchAccount", loginData],
        queryFn: () => fetchAccount(loginData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    // useQuery für Registrierung
    const { refetch: refetchRegister, isLoading: isLoadingRegister, error: errorRegister } = useQuery({
        queryKey: ["submitRegister", registerData],
        queryFn: () => submitRegister(registerData),
        retry: 0,
        retryDelay: 1000,
        enabled: false,
    });

    const handleLogin = async () => {
        try {
            setShowErrorLogin(false); // Fehlermeldung zurücksetzen
            const response = await refetchLogin(); // Anfrage auslösen
            if (response.status === "success") {
                const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
                const customerData = (await refetchAccount()).data;
                const user: User = {
                    email: customerData.email,
                    password: customerData.password,
                    customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
                    session: session, // Setze die Session aus der Login-Antwort
                    isAdmin: customerData.admin
                };
                login(user);
                setShowRegister(false); // Zurück zum Login wechseln
                onSubmit(); // Dialog schließen
            } else {
                setShowErrorLogin(true); // Fehlermeldung anzeigen
            }
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
        } catch (error) {
            setShowErrorLogin(true); // Fehlermeldung anzeigen
        }
    };

    const handleRegister = async () => {
        try {
            setShowErrorRegister(false); // Fehlermeldung zurücksetzen
            await refetchRegister(); // Beispiel für den Refetch-Aufruf
            // Erfolgslogik hier
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
        } catch (error) {
            setShowErrorRegister(true); // Fehlermeldung anzeigen
        }
    };

    return (
        <Dialog open={open} onClose={onClose} disableEnforceFocus>
            <DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
            <DialogContent>
                {showRegister ? (
                    <>
                        <TextField
                            margin="dense"
                            label={t("email")}
                            type="email"
                            fullWidth
                            value={registerData.email}
                            onChange={e => setRegisterData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("password")}
                            type="password"
                            fullWidth
                            value={registerData.password}
                            onChange={e => setRegisterData(prev => ({ ...prev, password: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("firstName")}
                            type="text"
                            fullWidth
                            value={registerData.customer.name}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, name: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("lastName")}
                            type="text"
                            fullWidth
                            value={registerData.customer.surname}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, surname: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("address")}
                            type="text"
                            fullWidth
                            value={registerData.customer.address}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, address: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("country")}
                            type="text"
                            fullWidth
                            value={registerData.customer.country}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, country: e.target.value },
                            }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("zip")}
                            type="text"
                            fullWidth
                            value={registerData.customer.zip}
                            onChange={e => setRegisterData(prev => ({
                                ...prev,
                                customer: { ...prev.customer, zip: e.target.value },
                            }))}
                        />
                    </>
                ) : (
                    <>
                        <TextField
                            margin="dense"
                            label={t("email")}
                            type="email"
                            fullWidth
                            value={loginData.email}
                            onChange={e => setLoginData(prev => ({ ...prev, email: e.target.value }))}
                        />
                        <TextField
                            margin="dense"
                            label={t("password")}
                            type="password"
                            fullWidth
                            value={loginData.password}
                            onChange={e => setLoginData(prev => ({ ...prev, password: e.target.value }))}
                        />
                    </>
                )}
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose}>{t("cancel")}</Button>
                {showRegister ? (
                    <Button onClick={handleRegister} disabled={isLoadingRegister}>
                        {isLoadingRegister ? t("loading") : t("register")}
                    </Button>
                ) : (
                    <Button onClick={handleLogin} disabled={isLoadingLogin}>
                        {isLoadingLogin ? t("loading") : t("login")}
                    </Button>
                )}
            </DialogActions>
            {showErrorLogin && errorLogin && (
                <Box color="error.main">{t("loginFailed")}</Box>
            )}
            {showErrorRegister && errorRegister !== null && (
                <Box color="error.main">{t("registerFailed")}</Box>
            )}
            {showRegister ? (
                <Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
                    <Link
                        component="button"
                        variant="body2"
                        onClick={() => setShowRegister(false)}
                        color="primary"
                        underline="hover"
                    >
                        {t("backToLogin")}
                    </Link>
                </Box>
            ) : (
                <Box sx={{ width: '100%', textAlign: 'center', pb: 2 }}>
                    <Link
                        component="button"
                        variant="body2"
                        onClick={() => setShowRegister(true)}
                        color="primary"
                        underline="hover"
                    >
                        {t("noAccountRegister")}
                    </Link>
                </Box>
            )}
        </Dialog>
    );
};

export default LoginDialog;