var weatherStationLastUpdate		= document.getElementById("weatherStationLastUpdate");

var cardUV							= document.getElementById("cardUV");
var cardUVPoint						= document.getElementById("cardUVPoint");

var cardRain						= document.getElementById("cardRain");
var cardRainRate					= document.getElementById("cardRainRate");

var cardTermalSensation				= document.getElementById("cardTermalSensation");
var cardTemperature					= document.getElementById("cardTemperature");


var cardMoonDescription				= document.getElementById("cardMoonDescription");
var cardMoonIcon					= document.getElementById("cardMoonIcon");

var cardSunRise						= document.getElementById("cardSunRise");
var cardSunSet						= document.getElementById("cardSunSet");

var cardLocalTime					= document.getElementById("cardLocalTime");
var cardLocalDate					= document.getElementById("cardLocalDate");

var cardPressure					= document.getElementById("cardPressure");

var cardHumidty						= document.getElementById("cardHumidity");
var cardHumidityWater				= document.getElementById("cardHumidityWater");
var cardDewPoint					= document.getElementById("cardDewPoint");

var cardWindSpeed					= document.getElementById("cardWindSpeed");
var cardWindDirection2				= document.getElementById("cardWindDirection2");
var cardWindDirectionArrow			= document.getElementById("cardWindDirectionArrow");

// day extremes
var cardMaxRainToday				= document.getElementById("cardMaxRainToday");
var cardMaxRainHour					= document.getElementById("cardMaxRainHour");
var cardTemperatureMax				= document.getElementById("cardTemperatureMax");
var cardTemperatureMin				= document.getElementById("cardTemperatureMin");
var cardUVMax						= document.getElementById("cardUVMax");
var cardWindGustMax					= document.getElementById("cardWindGustMax");

//var card50cardTemperatureMin		= document.getElementById("card50cardTemperatureMin");


var moons = {};

moons["Waxing Gibbous"] = { name: "Lua Crescente", icon: "waxing-gibbous.png" };
moons["First Quarter"] = { name: "Quarto Crescente", icon: "first-quarter.png" };
moons["Full Moon"] = { name: "Lua Cheia", icon: "full-moon.png" };
moons["Waning Gibbous"] = { name: "Lua Minguante", icon: "waning-gibbous.png" };
moons["Last Quarter"] = { name: "Quarto Minguante", icon: "last-quarter.png" };
moons["New Moon"] = { name: "Lua Nova", icon: "new-moon.png" };
moons["Waxing Crescent"] = { name: "Quarto Crescente", icon: "waxing-crescent.png" };
moons["Waning Crescent"] = { name: "Quarto Minguante", icon: "waning-crescent.png" };



function getWindDirectionAbbreviationPt(degrees) {
  const directions = [
    "N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSO", "SO", "OSO", "O", "ONO", "NO", "NNO"
  ];
  const index = Math.round(degrees / 22.5) % 16;
  return directions[index];
}

fetch(`https://app.thesocialnerd.pt/m/weatherStations.json.php?weatherStation=fontes`).then(res => res.json()).then(data => {
	
	//console.log(data);

	cardUV.innerHTML						= data.uv;
	cardUVPoint.style.marginLeft			= (40*data.uv)/5 + '%';			

	cardRain.innerHTML						= data.dailyRain;
	cardRainRate.innerHTML					= data.rainRate;

	
	cardTermalSensation.innerHTML			= data.outsideHeatIndex + ' <span style="font-size: 13px; font-weight: 300">ºC</span>';
	cardTemperature.innerHTML				= data.outsideTemp + ' <span style="font-size: 13px; font-weight: 300">ºC</span>';
	
	cardMoonDescription.innerHTML			= moons[data.MoonPhaseStr].name;
	cardMoonIcon.src						= '/m/i/moon/' + moons[data.MoonPhaseStr].icon;

	cardSunRise.innerHTML 					= data.sunriseTime;
	cardSunSet.innerHTML 					= data.sunsetTime;
					
	cardPressure.innerHTML					= data.barometer + ' 	hPa';
	
	const range = 1050 - 1000;
	const adjustedValue = data.barometer - 1000;
	const percentage = Math.abs((adjustedValue / range));
	cardPressure.style.setProperty('--value', percentage);
	
	cardHumidity.innerHTML					= data.outsideHumidity + '%';
	cardHumidityWater.style.height			= (data.outsideHumidity - 20) + '%';
	cardDewPoint.innerHTML					= 'Dew Point: ' + data.outsideDewPt + 'ºC';	
	
	cardWindSpeed.innerHTML						= data.windSpeed;
	cardWindDirection2.innerHTML				= getWindDirectionAbbreviationPt(data.windDir);
	cardWindDirectionArrow.style.transform 		= `rotate(${data.windDir}deg)`;

	cardMaxRainToday.innerHTML = data.dailyRain + ' <span style="font-size: 13px; font-weight: 300">mm</span>';
	cardMaxRainHour.innerHTML = data.hiRainRateHour + ' <span style="font-size: 13px; font-weight: 300">mm</span>';
	cardTemperatureMax.innerHTML	= data.hiOutsideTemp + ' <span style="font-size: 13px; font-weight: 300">ºC</span>';		
	cardTemperatureMin.innerHTML = data.lowOutsideTemp + ' <span style="font-size: 13px; font-weight: 300">ºC</span>';			
	cardUVMax.innerHTML = data.hiUV;
	cardWindGustMax.innerHTML = data.hiWindSpeed + ' <span style="font-size: 13px; font-weight: 300">km/h</span>';

	weatherStationLastUpdate.innerHTML	= data.date + ' &nbsp;' + data.time;


	max_scale = {
		cardTemperatureMin: {
			colors: {
				red: { min: -5, max: -1, per: 10 },
				orange: { min: -1, max: 0, per: 10 },
				yellow: { min: 1, max: 4, per: 20 },
				green: { min: 5, max: 50, per: 60 }
			},
			config: {
				unit: 'ºC',
				title: 'Temperatura Mínima',
				id: 'card50cardTemperatureMin',
				icon: 'thermometer'
			},
			value: data.lowOutsideTemp
		},
		cardTemperatureMax: {
			colors: {
				green: { min: 5, max: 33.9, per: 50 },
				yellow: { min: 34, max: 37.9, per: 16.6 },
				orange: { min: 38, max: 41.9, per: 16.6 },
				red: { min: 41, max: 60, per: 16.6 }
			},
			config: {
				unit: 'ºC',
				title: 'Temperatura Máxima',
				id: 'card50cardTemperatureMax',
				icon: 'thermometer'
			},
			value: data.hiOutsideTemp
		},
		cardUVMax: {
			colors: {
				green: { min: 0, max: 2.9, per: 20 },
				yellow: { min: 3, max: 5.9, per: 20 },
				orange: { min: 6, max: 7.9, per: 20 },
				red: { min: 7, max: 10.9, per: 20 },
				purple: { min: 10, max: 12, per: 20 }
			},
			config: {
				unit: '',
				title: 'UV Máximo',
				id: 'card50cardUVMax',
				icon: 'sun'
			},
			value: data.hiUV
		},
		cardWindGustMax: {
			colors: {
				green: { min: 0, max: 69, per: 50 },
				yellow: { min: 70, max: 90, per: 16.6 },
				orange: { min: 91, max: 130, per: 16.6 },
				red: { min: 130, max: 200, per: 16.6 },
			},
			config: {
				unit: 'km/h',
				title: 'Rajada Máxima',
				id: 'card50cardWindGustMax',
				icon: 'wind'
			},
			value: data.hiWindSpeed
		},
		cardRainHour: {
			colors: {
				green: { min: 0, max: 9.9, per: 50 },
				yellow: { min: 10, max: 20.9, per: 16.6 },
				orange: { min: 21, max: 40.9, per: 16.6 },
				red: { min: 41, max: 120, per: 16.6 },
			},
			config: {
				unit: 'mm',
				title: 'Precipitação Última Hora',
				id: 'card50cardMaxRainHour',
				icon: 'cloud-rain'
			},
			value: data.rain1h
		},
		cardRainToday: {
			colors: {
				green: { min: 0, max: 9.9, per: 50 },
				yellow: { min: 10, max: 20.9, per: 16.6 },
				orange: { min: 21, max: 40.9, per: 16.6 },
				red: { min: 41, max: 120, per: 16.6 },
			},
			config: {
				unit: 'mm',
				title: 'Precipitação Hoje',
				id: 'card50cardMaxRainToday',
				icon: 'cloud-rain'
			},
			value: data.dailyRain
		}
	};

	var max_colors = [];
	max_colors['green']        = "rgba(95,206,112,1)";
	max_colors['yellow']       = "rgba(254,217,64,1)";
	max_colors['orange']       = "rgba(252,154,19,1)";
	max_colors['red']          = "rgba(200,41,37,1)";
	max_colors['purple']       = "rgba(136,0,204,1)";

	for (const card in max_scale)
	{
		var html = `
					<div class="cardTitle"><i data-feather="${max_scale[card].config.icon}" style="width:16; height:16;"></i>&nbsp;&nbsp;${max_scale[card].config.title}</div>
					<br>
					<div class="valueLarge" id="">${max_scale[card].value} <span style="font-size: 13px; font-weight: 300">${max_scale[card].config.unit}</span></div>
					<br>
					<div style="width: 100%;">`;

		for (const color in max_scale[card].colors)
		{
			html = html + `<div style="float: left; background-color: ${max_colors[color]}; height: 0.5rem; width: ${max_scale[card].colors[color].per}%;">`;
			
			if (max_scale[card].value >= max_scale[card].colors[color].min && max_scale[card].value <= max_scale[card].colors[color].max)
			{
				/*
				console.log('value ' + max_scale[card].value);
				console.log('min ' + max_scale[card].colors[color].min);
				console.log('max ' + max_scale[card].colors[color].max);
				*/
				var max_percentage_in_range = ((max_scale[card].value - max_scale[card].colors[color].min) * 100) / (max_scale[card].colors[color].max - max_scale[card].colors[color].min);
				
				html = html + `<div class="h-color-bar-circle1" style="margin-left: ${max_percentage_in_range}%" id=""></div>`;
			  //html = html + `<div class="h-arrow-up-ccard-inside" style="margin-left: ${max_percentage_in_range}; background-color: black"></div>`;
			}

			html = html + `</div>`;
			
		}
		html = html + `<br /><br />`;
		
		document.getElementById(max_scale[card].config.id).innerHTML = html;
		html = '';
	}


      feather.replace();
	
})