var { Router,Route,IndexRoute,IndexLink,Link} = ReactRouter;
var {browserHistory} = ReactRouter.browserHistory;

var Header = React.createClass({
	render: function() {
		return (
			<div>
				<div className='header'>
				<h1>Weather Application</h1>
				</div>
				<div className='col-md-6 col-md-offset-3' ><ul>
				<li className="item"><IndexLink  to="/" activeClassName="active">My Location</IndexLink ></li>
				<li className="item"><Link to="/search" activeClassName="active">Search Location</Link></li>
				</ul></div>
				<div className="content">
          			<div className='row'>{this.props.children}</div>
        		</div>
			</div>
		);
	}
});

var InputBox = React.createClass({

	_update:function(){
		this.props.update(this.refs.newValue.value,this.props.index);
	},


	render: function() {
		return (
			<div>
			<input className='form-control' type='text' placeholder='Enter Location' ref='newValue'></input> <br />
			<button onClick={this._update} className='btn btn-primary center-block'>Get Weather</button>
			</div>
		);
	}
});

var Weather = React.createClass({
	render: function() {
		return (
			<div className="Weather">
		        <h4>Current Temp : {this.props.weather.current.temp_c}</h4>
		        <h4>Country : {this.props.weather.location.country}</h4>
		        <h4>Your Latitude : {this.props.weather.location.lat}</h4>
		        <h4>Your Longitute : {this.props.weather.location.lon}</h4>
	      </div>
		);
	}
});

var Control = React.createClass({
	getInitialState: function() {
		return {
			location: [''],
      		weather: {
        current: {},
        location: {}
		      }
		};
	},

	update:function(val){
		let a = this.state.location;
		a[0]=val;
		this.setState({location:a});
		this.componentDidMount();
	},

	componentDidMount() {

		var url = "https://api.apixu.com/v1/current.json?key=3965ee6e84ec4f3a848211319161209&q="+this.state.location[0];
		var _this = this;
    	this.serverRequest = axios
        .get(url)
        .then(function(result) {
        let x = result.data;
          _this.setState({weather: x});
        });
	},

	

	_map:function(text,i){
		return(
		<InputBox update={this.update} key={i} index={i}></InputBox>	
			);
	},

	map:function(text,i){
		return(
		<Weather key={i} weather={this.state.weather}></Weather>	
			);
	},

	render: function() {
		return (
			<div>
				<div>
				<div className="Co
				ntrol">{this.state.location.map(this._map)}</div>
				<div className="Control">{this.state.location.map(this.map)}</div>
				</div>
			</div>
		);
	}
});



var GeoLocol = React.createClass({
    
    getInitialState: function() {
		return {
			lat:'',
			long: '',
			weather: {
        		current: {},
        		location: {}
		    }
		};
	},

    handler: function(position) {
            this.lat = position.coords.latitude;
            this.long = position.coords.longitude;
            this.setState({lat:this.lat});
            this.setState({long:this.long});
    },

    componentDidMount() {
    	navigator.geolocation.getCurrentPosition(this.handler);
	},

    render: function() {
        return(
        	<div className="Weather">
        	<br />
        	<br />
        	<br />
        	<br />
		        <h4>Current Temp : </h4>
		        <h4>Country : </h4>
		        <h4>Your Latitude : {this.state.lat}</h4>

    }
});


ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={Header}>
           	<IndexRoute component={GeoLocol} />
           	<Route path='search'component={Control}/>
        </Route>
    </Router>
), document.getElementById('app'));
		        <h4>Your Longitute : {this.state.long}</h4>
	      </div>
        	);
