var React = require('react')
var ForecastActions = require('../../actions/forecast-actions')
var ForecastStore = require('../../stores/forecast-store')
var Day = require('../../components/output/day')

function success(){
  return {'errorMessage':'','forecast':ForecastStore.getForecast()}
}
function error(){
  return {'errorMessage':ForecastStore.getForecast(),'forecast':null}
}

class ForecastResults extends React.Component {
  constructor(props){
    super(props)
    this.state = {forecast:null,errorMessage:''}
  }

  _onSuccess(){
    console.log('_onSuccess',success());
    this.setState(success())
  }
  _onError(){
    this.setState(error())
  }
  componentWillMount(){
    ForecastStore.addSuccessListener(this._onSuccess.bind(this))
    ForecastStore.addErrorListener(this._onError.bind(this))

  }
  componentWillUnmount(){
    ForecastStore.removeSuccessListener(this._onSuccess.bind(this))
    ForecastStore.removeSuccessListener(this._onError.bind(this))
  }
  render() {
    var days = "Choose a city and # of days."
    var heading = ""
    var forecast = this.state.forecast
    if(this.state.forecast != null){
      var days = forecast.list.map((v,i)=><Day key={i} num={i} data={v}/>)
      var heading = <h2 className="row">{forecast.city.name} - {forecast.cnt} day forecast</h2>
    }
    return(
    <div className="results">
        <div className="row">
          <div className="col-md-12 errorMessage">{this.state.errorMessage}</div>
        </div>
        <div className="row"></div>
        {heading}
        {days}
    </div>
      )
  }
}

module.exports = ForecastResults