import React from 'react';
import ReactDOM from 'react-dom';


class Counter extends React.Component{
    constructor(props) {
      super(props);

      this.state = {
          sec: 0,
          date: new Date(),
          info: 'super zegar!'
      }

      console.log('constructor');
    }

    componentWillMount() {
        console.log('componentWillMount')
    }

    componentDidMount(){
        this.id = setInterval(() => {


            this.setState({
                sec: this.state.sec +1,
                date: new Date(),
            });

            console.log('interval!');
        }, 1000);

        console.log('componentDidMoiunt');
    }

    componentWillUnmount() {
        //alert('unmount!!!');
        clearInterval(this.id);
        console.log('componentWillUnmount');
    }

    render(){
        console.log('render');
        return <p><span>{this.state.info}</span>: Minęło  <strong>{this.state.sec}</strong> sekund, obecnie mamy: <span>{this.state.date.toLocaleString()}</span></p>;
    }

    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
  }

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            showTimer: true,
        }
    }

    componentDidMount() {
        this.timeout = setTimeout(() => {
            this.setState({
                showTimer: false,
            })
        }, 5000);
    }

    componentWillUnmount() {
        clearTimeout(this.timeout);
    }

    render() {

        if(this.state.showTimer) {
            return <Counter />
        }

        return <p>Koniec życia dla Counter</p>
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});