package site

import (
	"fmt"
	datastar "github.com/starfederation/datastar/sdk/go"
	"time"
)

templ pageDBmon(dbs []*DbmonDatabase, mutationRate float64, renderTime time.Duration) {
	<div
		id="contents"
		class="flex flex-col gap-4 p-4 w-full"
		data-signals={ fmt.Sprintf("{mutationRate: %d}", int(100*mutationRate)) }
		data-on-load={ datastar.GetSSE("/examples/dbmon/updates") }
	>
		@dbmonFPS(renderTime)
		<div style="display: flex;">
			<label>mutations: <span data-text="mutationRate.value"></span>%</label>
			<input
				class="range"
				type="range"
				min="1"
				max="100"
				data-bind="mutationRate"
				data-on-click={ datastar.PostSSE("/examples/dbmon/inputs") }
			/>
		</div>
		<div id="dbmon">
			@dbmonApp(dbs)
		</div>
	</div>
}

templ dbmonFPS(fps time.Duration) {
	<div id="fps">
		Average render time for entire page: { fmt.Sprint( fps) }
	</div>
}

templ dbmonPopover(query string) {
	<div class="popover">
		<div class="popover-content">{ query }</div>
		<div class="arrow"></div>
	</div>
}

templ dbmonQuery(query string, elapsed time.Duration) {
	<td class="text-xs font-mono">
		<div class="tooltip" data-tip={ query }>
			{ elapsed.String() }
		</div>
	</td>
}

templ dbmonDatabase(db *DbmonDatabase) {
	{{ t5q := db.top5Queries() }}
	<tr>
		<td class="dbname">{ db.name }</td>
		<td class={ dbmonCounterClasses(len(db.queries)) }>
			<span class={ dbmonCounterClasses(len(db.queries)) }>
				{ fmt.Sprintf("%d", len(db.queries)) }
			</span>
		</td>
		for _, q := range t5q {
			@dbmonQuery(q.query, q.elapsed)
		}
	</tr>
}

templ dbmonApp(dbs []*DbmonDatabase) {
	<table id="app" className="table table-xs w-full">
		<tbody>
			for _, db := range dbs {
				@dbmonDatabase(db)
			}
		</tbody>
	</table>
}