package capture

import "gitea.henriburau.de/haw-lan/cod4watcher/models"
import "gitea.henriburau.de/haw-lan/cod4watcher/views/layouts"
import "gitea.henriburau.de/haw-lan/cod4watcher/views"
import "gitea.henriburau.de/haw-lan/cod4watcher/views/components"
import "fmt"
import "net/url"

templ Capture(capture *models.Capture, table models.ResultTable) {
	@layouts.Base() {
		<div class="flex flex-col">
			<div class="flex">
				<div>
					<div class="block font-bold text-lg">
						{ capture.Name }
					</div>
					@components.ServerAddress(capture.Host, capture.Port)
					<div
						class="my-3 w-60"
						hx-get={ fmt.Sprintf("/server/status?host=%s&port=%s", url.QueryEscape(capture.Host), url.QueryEscape(capture.Port)) }
						hx-trigger="load, every 20s"
					>
						Loading Server status...
					</div>
				</div>
				@Pedestal(table)
			</div>
			<div hx-get={ fmt.Sprintf("/captures/%d/table", capture.ID) } hx-trigger="every 10s">
				@CaptureTable(table)
			</div>
			if views.Username(ctx) != "" {
				@MapSelectTable(capture)
			}
		</div>
	}
}

templ Medal(placement, name, color string) {
	<div class="flex flex-col gap-2">
		<i class={ "fa-solid", "fa-medal","text-3xl", color }></i>
		<span>
			{ placement } { name }
		</span>
	</div>
}

templ Pedestal(table models.ResultTable) {
	<div id="pedestal" hx-swap-oob="true" class="flex w-full justify-around items-center gap-5">
		if len(table.Rows) >= 1 {
			@Medal("1. Platz", table.Rows[0].Name, "text-yellow-400")
		}
		if len(table.Rows) >= 2 {
			@Medal("2. Platz", table.Rows[1].Name, "text-gray-500")
		}
		if len(table.Rows) >= 3 {
			@Medal("3. Platz", table.Rows[2].Name, "text-amber-700")
		}
	</div>
}

templ MapSelectTable(capture *models.Capture) {
	<div id="select-table" class="relative overflow-x-auto">
		<table class="w-full overflow-scroll text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
			<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
				<tr>
					<th scope="col" class="px-6 py-3">
						Map
					</th>
					for _, maps := range capture.MapScores {
						<th scope="col" class="px-6 py-3">
							{ maps.Map }
						</th>
					}
				</tr>
			</thead>
			<tbody class="overflow-y-scroll">
				<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
					<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Enabled</th>
					for _, maps := range capture.MapScores {
						<td class="px-6 py-4">
							<input type="checkbox" hx-target="#select-table" hx-swap="outerHTML" hx-post={ fmt.Sprintf("/captures/%d/mapscore/%d/counted/%t", capture.ID, maps.ID, !maps.Counted) } checked?={ maps.Counted }/>
						</td>
					}
				</tr>
			</tbody>
		</table>
	</div>
}