import React, { Component } from 'react';

import Loading1 from '../images/loading1.gif';

class LoadingSpinner extends Component {
  constructor(props){
    super(props);

    this.changeState = this.changeState.bind(this);
    this.timer = this.timer.bind(this);
  }

  state = {
    loadingImg: Loading1,
    loading: true
  }

  timer(){
    var self = this;
    var startTime = new Date().getTime();
    var interval = setInterval(function () {
      if (new Date().getTime() - startTime > 3000) {
        clearInterval(interval);
        return;
      }
      self.changeState();
    }, 2000);
  }

  changeState(){
    this.setState({
      loading: false,
    })
  }

  render() {


    const topMargin = {
      marginTop: "50px"
    }


    return (
      <div className="containter" style={topMargin}>
        <center>
          {this.state.loading ? <img src={this.state.loadingImg} onLoad=    {this.timer()} alt="Loading..." /> : <h2>Unable To Find What You Are Looking     For!</h2> }
        </center>
      </div>
    );
  }
}

export default LoadingSpinner;

private _isMount = false;

componentDidMount() {
  this._isMount = true;
}

componentWillUnmount()
{
    this._isMount = false;
}

timerJob()
{
    if(this._isMount == false)
        return;
    // setState
}

constructor(props){
 super(props);
}

componentDidMount() {
 this.changeState = this.changeState.bind(this);
 this.timer = this.timer.bind(this);
}