// this application appears broken 7/19/2019
class App extends React.Component {
	state = {
		data: "Please wait while you're weather is loading...",
	};
	componentDidMount() {
		navigator.geolocation.getCurrentPosition(pos => {
			this.setState({
				uri:
					"https://api.wunderground.com/api/c17e158abce8e935/conditions/q/" +
					pos.coords.latitude.toString() +
					"," +
					pos.coords.longitude.toString() +
					".json",
				lat: pos.coords.latitude.toString(),
				lon: pos.coords.longitude.toString(),
			});
		});
	}
	componentDidUpdate() {
		fetch(this.state.uri)
			.then(res => res.json())
			.then(data =>
				this.setState({
					data: {
						tempString: data.current_observation.temperature_string,
						realTemp: data.current_observation.feelslike_string,
						skyImg:
							data.current_observation.icon_url.substring(0, 4) +
							"s" +
							data.current_observation.icon_url.substring(4),
						location: data.current_observation.display_location.full,
						temp_f: data.current_observation.temp_f
					}
				})
			)
			.catch(err => console.log(err.message));
	}
	render() {
		return (
			<div
				className="align-items-center h-100 row"
				style={
					this.state.data.temp_f > 75
						? {
								backgroundColor: "red"
							}
						: this.state.data.temp_f > 60
							? {
									backgroundColor: "orange"
								}
							: this.state.data.temp_f > 40
								? {
										backgroundColor: "deepskyblue"
									}
								: this.state.data.temp_f < 41
									? {
											backgroundColor: "aqua"
										}
									: null
				}
			>
				{this.state.data.hasOwnProperty("tempString") ? (
					<div className="col shadow bg-light pt-4 pb-3 text-center">
						<img
							className="img-fluid"
							src={this.state.data.skyImg}
							alt="Current visual forcast"
						/>
						<div className="display-3">{this.state.data.location}</div>
						<div className="mt-4">
							It is currently {this.state.data.tempString}, and feels like{" "}
							{this.state.data.realTemp}
						</div>
						<div className="mt-4 font-italic">
							{this.state.data.temp_f > 75
								? "Getting pretty toasty"
								: this.state.data.temp_f > 60
									? "Pretty nice out for a walk"
									: this.state.data.temp_f > 40
										? "Bring a layer or two if you're going out"
										: this.state.data.temp_f < 41
											? "Don't stay out too long, you'll turn into an ice cube"
											: null}
						</div>
						<div className="text-right mt-5 font-weight-light">
							<a
								className="text-secondary"
								href={`https://wunderground.com/weather/${this.state.lat},${this.state.lon}`}
								target="_blank"
							>
								WunderGround
							</a>
						</div>
					</div>
				) : null}
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById("app"));