package home

import "gitlab.unjx.de/flohoss/godash/services"
import "gitlab.unjx.de/flohoss/godash/views/layout"
import "gitlab.unjx.de/flohoss/godash/components"
import "fmt"

templ Home(title string, bookmarks *services.Bookmarks, static *services.StaticInformation, live *services.LiveInformation) {
	<section class="grid gap-14">
		<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 select-none">
			@components.System("icon-[bi--cpu]",static.CPU.Name,"",static.CPU.Threads,"systemCpuPercentage","",live.CPU)
			@components.System("icon-[bi--memory]",live.Ram.Value,fmt.Sprintf(" | %s", static.Ram.Total),static.Ram.Swap,"systemRamPercentage","systemRamValue",live.Ram.Percentage)
			@components.System("icon-[bi--nvme]",live.Disk.Value,fmt.Sprintf(" | %s", static.Disk.Total),static.Disk.Partitions,"systemDiskPercentage","systemDiskValue",live.Disk.Percentage)
			@components.Uptime(static.Host.Architecture,"systemUptimePercentage",live.Uptime)
		</div>
		<div class="grid gap-4">
			for _, app := range bookmarks.Applications {
				<div class="grid gap-2">
					if app.Category != "" {
						<div class="heading">{ app.Category }</div>
					}
					<div class="grid-apps">
						for _, entry := range app.Entries {
							@components.Application(entry)
						}
					</div>
				</div>
			}
		</div>
		<div class="grid-apps">
			for _, link := range bookmarks.Links {
				<div class="flex flex-col gap-2">
					if link.Category != "" {
						<div class="heading">{ link.Category }</div>
					}
					for _, entry := range link.Entries {
						@components.Link(entry)
					}
				</div>
			}
		</div>
	</section>
	<script>
		let systemSSESource = null;
		let weatherSSESource = null;
		addEventListener('beforeunload', () => {
		systemSSESource && systemSSESource.close();
		weatherSSESource && weatherSSESource.close();
		});
		systemSSESource = new EventSource('/sse?stream=system');
		systemSSESource.onmessage = (e) => {
		const parsed = JSON.parse(e.data);
		replaceSystem(parsed);
		};
		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');

		// system elements
		const systemCpuPercentage = document.getElementById('systemCpuPercentage');
		const systemRamPercentage = document.getElementById('systemRamPercentage');
		const systemRamValue = document.getElementById('systemRamValue');
		const systemDiskPercentage = document.getElementById('systemDiskPercentage');
		const systemDiskValue = document.getElementById('systemDiskValue');
		const systemUptimePercentage = document.getElementById('systemUptimePercentage');
		const uptimeDays = document.getElementById('uptimeDays');
		const uptimeHours = document.getElementById('uptimeHours');
		const uptimeMinutes = document.getElementById('uptimeMinutes');
		const uptimeSeconds = document.getElementById('uptimeSeconds');

		function replaceWeather(parsed) {
		weatherIcon.setAttribute('xlink:href', '#' + parsed.icon);
		weatherTemp.innerText = parsed.temp;
		weatherDescription.innerText = parsed.description;
		weatherHumidity.innerText = parsed.humidity + '%';
		weatherSunrise.innerText = parsed.sunrise;
		weatherSunset.innerText = parsed.sunset;
		}

		function replaceSystem(parsed) {
		systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
		systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
		systemRamValue.innerText = parsed.ram.value;
		systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
		systemDiskValue.innerText = parsed.disk.value;
		systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
		uptimeDays.style = '--value:' + parsed.uptime.days;
		uptimeHours.style = '--value:' + parsed.uptime.hours;
		uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
		uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
		}
  	</script>
}

templ HomeIndex(
	title,
	version string,
	bookmarks *services.Bookmarks,
	static *services.StaticInformation,
	live *services.LiveInformation,
	cmp templ.Component,
) {
	@layout.Base(title, version) {
		@cmp
	}
}