package components

import (
	"fmt"
	"gitlab.unjx.de/flohoss/godash/services"
)

func getIcon(icon string) string {
	switch icon {
	case "01d":
		return "icon-[bi--sun-fill]"
	case "01n":
		return "icon-[bi--moon-fill]"
	case "02d":
		return "icon-[bi--cloud-sun-fill]"
	case "02n":
		return "icon-[bi--cloud-moon-fill]"
	case "03d", "03n":
		return "icon-[bi--cloud-fill]"
	case "04d", "04n":
		return "icon-[bi--clouds-fill]"
	case "09d", "09n":
		return "icon-[bi--cloud-rain-heavy-fill]"
	case "10d", "10n":
		return "icon-[bi--cloud-drizzle-fill]"
	case "11d", "11n":
		return "icon-[bi--cloud-lightning-rain-fill]"
	case "13d", "13n":
		return "icon-[bi--cloud-snow-fill]"
	case "50d", "50n":
		return "icon-[bi--cloud-fog2-fill]"
	default:
		return ""
	}
}

templ Weather(weather *services.OpenWeather) {
	<div class="flex items-center select-none">
		<span id="weatherIcon" class={ "extra-icon h-12 w-12 shrink-0 mr-4 md:w-14 md:h-14", getIcon(weather.Icon) }></span>
		<div>
			<div class="text-4xl md:text-4xl"><span id="weatherTemp">{ fmt.Sprintf("%0.2f",weather.Temp) }</span> { weather.Units }</div>
			<div class="flex items-center gap-5 text-xs">
				<div class="flex items-center">
					<span class="extra-icon icon-[bi--chat-quote]"></span>
					<div id="weatherDescription" class="extra-info">{ weather.Description }</div>
				</div>
				<div class="flex items-center">
					<span class="extra-icon icon-[bi--droplet]"></span>
					<div id="weatherHumidity" class="extra-info">{ fmt.Sprintf("%d %%",weather.Humidity) }</div>
				</div>
				<div class="hidden sm:flex items-center">
					<span class="extra-icon icon-[bi--sunrise]"></span>
					<div id="weatherSunrise" class="extra-info">{ weather.Sunrise }</div>
				</div>
				<div class="hidden sm:flex items-center">
					<span class="extra-icon icon-[bi--sunset]"></span>
					<div id="weatherSunset" class="extra-info">{ weather.Sunset }</div>
				</div>
			</div>
		</div>
	</div>
	<script>
    	let weatherSSESource = null;
		addEventListener('beforeunload', () => {
      		weatherSSESource && weatherSSESource.close();
		});
		weatherSSESource = new EventSource('/sse?stream=weather');
		weatherSSESource.onmessage = (e) => {
			const parsed = JSON.parse(e.data);
			replaceWeather(parsed);
		};


		// weather elements
		const weatherIcon = document.getElementById('weatherIcon');
		const weatherTemp = document.getElementById('weatherTemp');
		const weatherDescription = document.getElementById('weatherDescription');
		const weatherHumidity = document.getElementById('weatherHumidity');
		const weatherSunrise = document.getElementById('weatherSunrise');
		const weatherSunset = document.getElementById('weatherSunset');

		function weatherClass(icon) {
			switch (icon) {
				case "01d":
					return "icon-[bi--sun-fill]";
				case "01n":
					return "icon-[bi--moon-fill]";
				case "02d":
					return "icon-[bi--cloud-sun-fill]";
				case "02n":
					return "icon-[bi--cloud-moon-fill]";
				case "03d":
				case "03n":
					return "icon-[bi--cloud-fill]";
				case "04d":
				case "04n":
					return "icon-[bi--clouds-fill]";
				case "09d":
				case "09n":
					return "icon-[bi--cloud-rain-heavy-fill]";
				case "10d":
				case "10n":
					return "icon-[bi--cloud-drizzle-fill]";
				case "11d":
				case "11n":
					return "icon-[bi--cloud-lightning-rain-fill]";
				case "13d":
				case "13n":
					return "icon-[bi--cloud-snow-fill]";
				case "50d":
				case "50n":
					return "icon-[bi--cloud-fog2-fill]";
				default:
					return "";
			}
		}

		function replaceWeather(parsed) {
			weatherIcon.className.split(' ').forEach(function(className) {
				if (className.startsWith('icon-')) {
					weatherIcon.classList.remove(className);
				}
			});
			weatherIcon.classList.add(weatherClass(parsed.icon));
			weatherTemp.innerText = parsed.temp;
			weatherDescription.innerText = parsed.description;
			weatherHumidity.innerText = parsed.humidity + '%';
			weatherSunrise.innerText = parsed.sunrise;
			weatherSunset.innerText = parsed.sunset;
		}
  	</script>
}