import React, { useState } from "react"
import styles from "./RegisterMember.module.css"
import TextInput from "../../../../components/ui/Input/Input"
import Button from "../../../../components/ui/Button/Button";
import Response from "../../../../interfaces/response.interface";
import ResponseData from "./responseData.inteface";
import adminCreateUser from "../../../../utils/users/adminCreateUser";
import Modal from "../../../../components/ui/Modal/Modal";


const RegisterMember: React.FC = () => {

    const [name, setName] = useState<string>("");
    const [lastname, setLastName] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [phone, setPhone] = useState<string>("");
    const [password, setPassword] = useState<string>("");

    const [open, setOpen] = useState<boolean>(false);
    const [title, setTitle] = useState<string>("");
    const [message, setMessage] = useState<string>("");


    const handleCreate = async (): Promise<void> => {

        if(name !== "" && lastname !== "" && email !== "" && phone !== "" ) {
            const response: Response<ResponseData> = await adminCreateUser(email, name, lastname, phone);
            if(response.status === 200) {
                setPassword(response.data.password);
                setTitle(`Utilisateur enregistré avec succès`);
                setMessage(`L'utilisateur ${name} ${lastname} a été enregistré avec le mot de passe: ${response.data.password}`);
                setOpen(true);
            } else {
                setTitle(`Erreur`);
                setMessage(`Une erreur est survenue lors de l'enregistrement de ${name} ${lastname}`);
                setOpen(true);
            }
        } else {
            setTitle("Erreur");
            setMessage("Un des champs n'a pas été rempli");
            setOpen(true);
        }
    }

    const showPassword = (): void => {
        setTitle(`Mot de passe de ${name} ${lastname}`);
        setMessage(password);
        setOpen(true);
    }

    return <div className={`${styles.leftBlock} glassCard`}>
        <div className={styles.registerMemberHeader}>
            <h2>Enregister un bénévole</h2>
        </div>

        <div className={styles.registerForm}>
            <TextInput placeholder={"Prenom"} type={"text"} value={name} onChange={e => setName(e.target.value)}  />
            <TextInput placeholder={"Nom"} type={"text"} value={lastname} onChange={e => setLastName(e.target.value)}  />
            <TextInput placeholder={"Adresse Email"} type={"email"} value={email} onChange={e => setEmail(e.target.value)}  />
            <TextInput placeholder={"Numéro de téléphone"} type={"tel"} value={phone} onChange={e => setPhone(e.target.value)}  />

            {password !== "" && <Button onClick={showPassword}> Afficher le mot de passe </Button>}

            <Button variant={"default"} onClick={handleCreate}>Enregistrer</Button>
        </div>

        <Modal open={open} onClose={() => setOpen(false)} title={title}>
            <p className={styles.modalContent}>{message}</p>
        </Modal>

    </div>
}

export default RegisterMember