import React from 'react';
import ReactDOM from 'react-dom';
// fonction padding : ajoute 0 si < 10
function pad(s) { return (s < 10) ? '0' + s : s; }

// Search component created as a class
export default class Horloge extends React.Component {

  constructor(props) {
    super(props);
    this.state = {time:this.updatedTime()};

    // pour avoir accèss a this.setstate dans la fonction
    this.tick = this.tick.bind(this);
  }

  componentDidMount() {
     this.timer = setInterval(this.tick, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  // methode permettant de recuperer la date et l'heure courante parsées
  updatedTime(){
   var now = new Date();
   return      { jour   : [pad(now.getDate()), pad(now.getMonth()+1), now.getFullYear()].join('/') ,
                 heures  : pad(now.getHours()),
                 minutes : pad(now.getMinutes()),
                 secondes : pad(now.getSeconds())
               };
  }

  //gestion de l'event du timer
  tick(){
    var now = new Date();
    var newState = {time:this.updatedTime()};
    //mise a jour du state
    this.setState(newState);
  }

  render() {
    return (
      <div>
            <h3>{this.state.time.jour}</h3>
            <h4>{this.state.time.heures}:{this.state.time.minutes}</h4>
      </div >
    );
  }
}