package view

import (
	"git.staur.ca/stobbsm/clustvirt/lib/host"
	bf "github.com/labstack/gommon/bytes"
	"git.staur.ca/stobbsm/clustvirt/view/components"
	"git.staur.ca/stobbsm/clustvirt/view/layouts"
)

// MemChart get's the memory pi chart from the host
templ MemChart(h *host.Host) {
	<div class={ "flex" , "flex-row" }>
		<div class={ "size-64" }>
			@templ.Raw(h.ChartMemory())
		</div>
		<ul>
			<li>Free: { bf.Format(int64(h.NodeMemory.Free*1024)) }</li>
			<li>Cached: { bf.Format(int64(h.NodeMemory.Cached*1024)) }</li>
			<li>Buffers: { bf.Format(int64(h.NodeMemory.Buffers*1024)) }</li>
			<li>Total: { bf.Format(int64(h.NodeMemory.Total*1024)) }</li>
		</ul>
	</div>
}

// HostConnect is the page that allows us to select a host to get information from
templ HostMain(navBarItems []components.NavItem) {
	@layouts.Manager("ClustVirt", "Cluster Manager", navBarItems) {
		<div class={ "flex" , "flex-row" , "h-full" }>
			<div id="sysNavBar" class={ "w-1/6" , "border-uigrey-600" , "border" , "rounded" , "border-dotted" , "p-1" }>
				<ul>
					<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/venus.staur.ca">venus.staur.ca</a></li>
					<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/earth.staur.ca">earth.staur.ca</a></li>
					<li><a href="#" hx-target="#sysContent" hx-get="/htmx/host/mars.staur.ca">mars.staur.ca</a></li>
				</ul>
			</div>
			<div id="sysContent" class={ "w-3/4" , "px-2" }>
				<p>This is where you can see a system overview of all available hosts</p>
				<p>
					For now, there is just this simple box to choose a host to connect to
					and push the button to load the system information via HTMX
				</p>
			</div>
		</div>
	}
}

// HostInfo is meant to be an HTMX response
templ HostInfo(h *host.Host) {
	<h3>{ h.HostName }</h3>
	@MemChart(h)
}