SAE-BUT2-frontend/src/pages/Profile/components/SettingsModal/SettingsModal.tsx

import {useContext, useState, ChangeEvent} from "react";
import Modal from "../../../../components/ui/Modal/Modal";
import Button from "../../../../components/ui/Button/Button";
import styles from "./SettingsModal.module.css";
import ThemeSwitcher from "../../../../components/ui/ThemeSwitcher/ThemeSwitcher";
import {AuthContext} from "../../../../contexts/Auth/AuthContext";
import TextInput from "../../../../components/ui/Input/Input";
import updateUser from "../../../../utils/users/updateUser.js";
import deleteUser from "../../../../utils/users/deleteUser.js";

interface TaskType {
    id: number;
    title?: string;
    completed?: boolean;

    [key: string]: unknown;
}

interface User {
    id: number;
    name: string;
    lastname: string;
    role: string;
    email: string;
    phone: string | null;
    created_at: string;
    isAdmin: boolean;
    tasks: TaskType[];
}

interface AuthContextType {
    user: User;
    update: () => void;
    logout: () => void;
}

export default function SettingsModal() {
    const {user, logout, update} = useContext(AuthContext) as AuthContextType;

    const [open, setOpen] = useState<boolean>(false);
    const [isDelete, setIsDelete] = useState<boolean>(false);

    const [name, setName] = useState<string>(user?.name ?? "");
    const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
    const [phone, setPhone] = useState<string>(user?.phone ?? "");

    const handleLogout = (): void => {
        logout();
    };

    const handleSubmit = async (): Promise<void> => {
        await updateUser(name, lastname, phone || null);
        update();
        setOpen(false);
    };

    const handleDelete = async (): Promise<void> => {
        await deleteUser();
        update();
    };

    const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
        setName(e.target.value);
    };

    const handleLastnameChange = (e: ChangeEvent<HTMLInputElement>): void => {
        setLastName(e.target.value);
    };

    const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>): void => {
        setPhone(e.target.value);
    };


    return (
        <>
            <Button variant="transparent" onClick={() => setOpen((prev) => !prev)}>
                <img
                    src="/icons/settings-wheel.svg"
                    alt="Modify btn"
                    className={styles.modifyIcon}
                />
            </Button>

            <Modal
                title="Paramètres"
                open={open}
                onClose={() => setOpen(false)}
            >
                <div className={styles.content}>
                    <div className={styles.section}>
                        <h3>Compte</h3>

                        <Button variant="danger" onClick={handleLogout}>
                            Déconnexion
                        </Button>

                        <Button
                            variant="danger"
                            onClick={() => setIsDelete(true)}
                        >
                            Supprimer le compte
                        </Button>

                        <div className={styles.section}>
                            <h4>Changer de Prénom</h4>
                            <TextInput
                                value={name}
                                onChange={handleNameChange}
                                type="text"
                            />
                        </div>

                        <div className={styles.section}>
                            <h4>Changer de nom</h4>
                            <TextInput
                                value={lastname}
                                onChange={handleLastnameChange}
                                type="text"
                            />
                        </div>

                        <div className={styles.section}>
                            <h4>Changer de numéro de téléphone</h4>
                            <TextInput
                                value={phone}
                                onChange={handlePhoneChange}
                                type="text"
                            />
                        </div>

                        <Button
                            className={styles.submitBtn}
                            onClick={handleSubmit}
                        >
                            Confirmer
                        </Button>
                    </div>

                    <div className={styles.section}>
                        <h3>Apparence</h3>
                        <ThemeSwitcher/>
                    </div>
                </div>
            </Modal>

            <Modal
                title="Validation"
                open={isDelete}
                onClose={() => setIsDelete(false)}
            >
                <div className={styles.section}>
                    <p className={styles.alignText}>
                        Êtes vous vraiment sûr de vouloir supprimer votre compte ?
                    </p>
                    <Button
                        variant="danger"
                        className={styles.submitBtn}
                        onClick={handleDelete}
                    >
                        Confirmer
                    </Button>
                </div>
            </Modal>
        </>
    );
}