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 } from "react"
import { User } from "./model/User" 
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

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}/>
            <ContentAccountSettings user={user}/>
        </div>
    );
}

function ContentAccountSettings({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>
    // );

    return (
        <div id="account-infos">
            <Form>
                <Form.Group className="mb-3" controlId="formUsername">
                    <Form.Label className="content">Nom d'utilisateur</Form.Label>
                    <Form.Control size="sm" defaultValue={user.name}/>
                </Form.Group>
                <Form.Group className="mb-3" controlId="formEmail">
                    <Form.Label className="content">Adresse mail</Form.Label>
                    <Form.Control size="sm" defaultValue={user.email} type="email" placeholder="Password" />
                </Form.Group>
                <Button variant="outline-primary" type="submit">Mettre à jour</Button>
            </Form>
        </div>
        
    );
}

function setVariable({varia} : {varia : any}){

}

// function InputSettings(){
//     return(
//         <div className="input-settings">
//             <p className="title-input-settings">{title}</p>     
//         </div>
//     )
// }