const APIKEY = 'lrokzEoN2n7ifLAVgrChU4V6XPEyqAZp5ikO6UWF';

document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
		async init() {
			console.log('init');
			// get Forecasts for my cities
			await this.getForecasts(this.cities);
			this.renderChart();
		},
		cities: [
			{ label: "Lafayette, LA", latitude: 30.22, longitude: -92.02 },
			{ label: "Bellingham, WA", latitude: 48.768, longitude: -122.485 },
			{ label: "Chicago, IL", latitude: 41.881, longitude: -87.623 },
			{ label: "Washington, DC", latitude: 38.895, longitude: -77.036 }			
		],
		numForecasts:0,
		async getForecasts(locs) {
			console.log('get forecasts for my locations');
			let requests = [];
			locs.forEach(l => {
				requests.push(this.getHourlyForecast(l.latitude, l.longitude));
			});
			let data = await Promise.all(requests);
			data.forEach((d, i) => {
				this.cities[i].forecast = d;
			});
			this.numForecasts = this.cities[0].forecast.length;
		},
		async getHourlyForecast(lat, lng) {
			/*
			Implement simple caching so CodePen doesn't go crazy hitting the API.
			*/
			if(sessionStorage[`forecast_${lat}_${lng}`]) return JSON.parse(sessionStorage[`forecast_${lat}_${lng}`]);
			console.log('not in cache');
			let req = await fetch(`https://api.pirateweather.net/forecast/${APIKEY}/${lat},${lng}?exclude=alerts,daily,currently,minutely&units=us`);
			let data = await req.json();
			let result = data.hourly.data.slice(0,12);
			sessionStorage[`forecast_${lat}_${lng}`] = JSON.stringify(result);
			return result;
		},
		renderChart() {
			const ctx = document.getElementById('myChart');

			let names = this.cities.map(c => c.label);
			
			let highestTemps = this.cities.map(c => {
				return c.forecast.reduce((highest,f) => {
					if(f.temperature > highest) return f.temperature;
					return highest;
				},0);
			});

			let lowestTemps = this.cities.map(c => {
				return c.forecast.reduce((lowest,f) => {
					if(f.temperature < lowest) return f.temperature;
					return lowest;
				},999);
			});
			
			new Chart(ctx, {
				type: 'line',
				data: {
					labels: names,
					datasets: [
						{
							label: 'Highest Temp',
							data: highestTemps,
							borderWidth: 1
						},
						{
							label: 'Lowest Temp',
							data: lowestTemps,
							borderWidth: 1
						}						
					]
				},
				options: {
					scales: {
						y: {
							min: -20,
							max: 120
						}
					}
				}
			});
			
		}
  }))
});