//extends the React.Component

class MessageInfo extends React.Component {
    
   constructor(props) {
    //call to props
    super(props)
    //use let instead of var is more cool
    
    let active = this.props.statusCode >= 0 && this.props.statusCode <=501 ? true : false;
    
    //set the state and put the interval to null
     
    this.state = {active : active}
    this.interval = null;
  
   }
  
  //first lifecycle before the component is Mounted

  componentDidMount() {
    
    this.interval = setInterval(() => {
      this.setState({active: !this.state.active})
    },this.props.time)
  
  }
  
  //we clear the interval when the component is unmounted from the DOM

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  handleActive() {
    
    this.setState({
      active: false
    });
  
  }

  clear() {
    
    clearInterval(this.interval)
    this.handleActive();
    
  }


//renders the message
  renderMessage() {
    
    if( this.state.active  ) {
      
      return(
        
        <div className='message-info' onClick={this.clear.bind(this)}>
          <div className='message-inner'>
            <p>No se puede establecer la conexión con el servidor. Error {this.props.statusCode}</p>
          </div>
          <span className="button-close" onClick={this.clear.bind(this)}></span>
        </div>
      
      )
    }

    return null


  }
  
  //calls to renderMesssage

  render() {
    return (
    <div>
      {this.renderMessage()}
    </div>
    )
  }

}

//we defined the propTypes needed for our component

MessageInfo.propTypes = {
  statusCode: React.PropTypes.number.isRequired,
  time: React.PropTypes.number
}

//we can set the defaultProps

MessageInfo.defaultProps  = {
  time: 1000
}

//It renders the component in our app wrapper
//You can change the values passed to see if it changes

React.render( <MessageInfo statusCode={200} time={1000} />, document.getElementById('app') );