import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import "./profilAdmin.css"
import {FaPen, FaExclamation } from "react-icons/fa"
import {HiUserCircle} from "react-icons/hi"
import { useDispatch, useSelector } from "react-redux";
import { RegisterUser } from "../../JS/Actions/user.actions";
import { useNavigate } from "react-router-dom";




const ProfilAdmin = () => {

    const dispatch = useDispatch();

    const [user, setUser] = useState({
        firstName: "",
        lastName: "",
        telephone: "",
        email: "",
        password: "",
      });

      const HandleChange = (e) => {
        setUser({ ...user, [e.target.name]: e.target.value });
      };


      const userReducer = useSelector((state) => state.userReducer);

  return (
    <div className='profilbody'>
        <h1>Profil</h1>
        <div className='profilBx'>
            <div className='sideNav'>
                <div className='route'>  <a href="profiladmine"> <FaPen className='icons' size={"15px"} color={"#247285"} />Modifier le profil</a></div>
                <div className='route'>  <a> <FaExclamation className='icons' size={"15px"} color={"#247285"} />Cabinet</a></div>
            </div>
            <div className='formBx'>
                <h2>Photo de profil</h2>
                <div className='photo-container'>
                <img src="/assets/img/imageAuth.png" alt="..." class="img-thumbnail"></img>
                <HiUserCircle className='photoIcon' size={"40px"} color={"#247285"}  />
                </div>
            <div className='inputBx'> 
                <h2>Coordonnées</h2>  
                <div class="container">
                    <div class="row">
                    <div class="input-group mb-4 col">
                        <input
                            type="text"
                            name="firstName"
                            className="form-control"
                            placeholder="Nom et prénom"
                            aria-describedby="basic-addon2"
                            //onChange={(e) => HandleChange(e)}
                            />
                            <span className="iconForm">
                            <FaPen size={"20px"} color={"#206778"} />
                            </span>
                        </div>
                        <div class="input-group mb-4 col">
                        <input
                            type="email"
                            name="email"
                            className="form-control"
                            placeholder="Adresse email"
                            aria-describedby="basic-addon2"
                            //onChange={(e) => HandleChange(e)}
                            />
                            <span className="iconForm">
                            <FaPen size={"20px"} color={"#206778"} />
                            </span>
                        </div>
                        <div class="w-100"></div>
                        <div class="input-group mb-4 col">
                        <input
                            type="number"
                            name="numerotelephone"
                            className="form-control"
                            placeholder="Num de téléphone"
                            aria-describedby="basic-addon2"
                            //onChange={(e) => HandleChange(e)}
                            />
                            <span className="iconForm">
                            <FaPen size={"20px"} color={"#206778"} />
                            </span>
                        </div>
                        <div class="input-group mb-4 col">
                        <input
                            type="password"
                            name="password"
                            className="form-control"
                            placeholder="Mot de passe"
                            aria-describedby="basic-addon2"
                            //onChange={(e) => HandleChange(e)}
                            />
                            <span className="iconForm">
                            <FaPen size={"20px"} color={"#206778"} />
                            </span>
                        </div>
                        
                        </div>
                        <button className="annuler">Annuler</button>
                    <button className="buttonConnexion" 
                    //</div> onClick={() => { dispatch(RegisterUser(user, navigate));
                   // }}
                    >Enregistrer
                    </button>
                    </div>
                    
                </div>
                   
            </div>
        </div>
    </div>
  )
}

export default ProfilAdmin