import "../style/settings/settings.css"
import 'bootstrap/dist/css/bootstrap.min.css';
import { MainTitle, SecondTitle } from "./component/Title"
import {Header} from './template/Header'
import { useState, ChangeEvent, useRef } from "react"
import { User } from "./model/User" 
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';    
import Image from 'react-bootstrap/Image';
import { updateSourceFile } from "typescript";
import { fetchAPI } from "../Fetcher";


export default function Settings({user} : {user : User}){
    return (
        <div id="main">
            <Header username={user.name} />
            <Body user={user}/>
        </div>
    )
}

function Body({user} : {user : User}) {
    return (
        <div id="body">
            <div id="content">
                <MainTitle title="Paramètres" id={null}/>
                <AccountSettings user={user} />
            </div>
        </div>
    )
}

function AccountSettings({user} : {user : User}){
    return (
        <div id="account">
            <SecondTitle title="Compte personnel" id={null}/>
            <ProfilSettings user={user} />
        </div>
    );
}

function ProfilSettings({user} : {user : User}) {
    // Utilisez useState pour gérer l'état du champ de saisie
    // const [username, setUsername] = useState({user.username});

    // // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
    // const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
    //     setUsername(event.target.value);
    // };

    // return (
    //     <form id="account-content">
    //         <dl>
    //             <dt>Nom d'utilisateur</dt>
    //             {/* Utilisez la valeur de l'état et la fonction onChange */}
    //             <dd><input type="text" value={username} onChange={handleUsernameChange} /></dd>
    //         </dl>
    //     </form>
    // );

    const nameRef = useRef<HTMLInputElement>(null);
    const emailRef = useRef<HTMLInputElement>(null);


    const size = "171x180";
    const profilePicture = user.profilePicture + "/" + size;
    return (
        <div id="account">
            <div id="profil-picture">
                <Image src={profilePicture}roundedCircle />
                <Button variant="outline-primary">Changer photo de profil</Button>
            </div>
            <div id="account-infos">
                <Form>
                    <Form.Group className="mb-3" controlId="formUsername">
                        <Form.Label className="content">Nom d'utilisateur</Form.Label>
                        <Form.Control ref={nameRef} size="sm" defaultValue={user.name}/>
                    </Form.Group>
                    <Form.Group className="mb-3" controlId="formEmail">
                        <Form.Label className="content">Adresse mail</Form.Label>
                        <Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
                    </Form.Group>
                    <Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value)}>Mettre à jour</Button>
                </Form>
            </div>
        </div>
    );
}


function updateAccountInfos(name : string, email : string) {
    fetchAPI("account/update/profile", {
        name : name,
        email : email
    });
}
// function InputSettings(){
//     return(
//         <div className="input-settings">
//             <p className="title-input-settings">{title}</p>     
//         </div>
//     )
// }