import React from 'react';
import '../../css/Views/home.css';
import Header from '../Components/Header';
import Button from '../Components/Button';
import Connection from '../Components/Connection';
import Footer from '../Components/Footer';

class Home extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      onConnection:false
    }
  }

  // Gère l'affichage de l'interface de connexion
  handleConnection = () => {
    this.setState({onConnection:true})
  }

  // Gère la femeture de l'interface de connexion
  handleCloseConnection = () => {
    this.setState({onConnection:false})
  }

    render() {
      return (
          <div className="home">
              {/* Affiche par dessus la page d'accueil une interface de connexion */}
              {this.state.onConnection &&
               /* Appel du composant Connection qui affiche l'interface de connexion
                Paramètres : 
                handleCloseAbove : gère la fermeture du composant */
                <Connection handleCloseAbove={this.handleCloseConnection}/>
              }
              {/* Appel du composant Header qui affiche le Header du site
              Paramètre : title : texte intérieur */}
                <Header title='Proximo'/>
                <div className="content">
                  <div className="contentTxt">Bienvenue sur le site de la supérette de l'INSA !</div>
                  <div className="buttonBlock">
                  {/* Appel du composant Button
                  Paramètres : 
                   - handleConnection : gérer l'affichage de l'interface de connexion
                   - label : texte interne */}
                    <Button handleConnection={this.handleConnection}  label="Connexion"/>
                  </div>
                </div>
                {/* Appel du composant Footer qui affiche le Footer du site */}
                <Footer/>
          </div>
      );
    }
  }

  export default Home