package view

import (
	"fmt"
	"stevenlr.com/locker/model"
)

templ LockTokenForm(lock model.Lock) {
	<p class="token-form">
		<button
			type="button"
			hx-post={ fmt.Sprint("/lock/", lock.Id, "/resetToken") }
			hx-target="closest .token-form"
			hx-confirm="Are you sure you want to reset the token for this lock?"
		>Reset token</button>
		<button
			type="button"
			hx-get={ fmt.Sprint("/lock/", lock.Id, "/token") }
			hx-swap="outerHTML"
		>Show token</button>
	</p>
}

func renderTimeString(value int, unit string) string {
	s := ""
	if value > 1 { s = "s" }
	return fmt.Sprint(value, " ", unit, s)
}

templ timeButton(id model.UUID, value int, unit string) {
	<button
		hx-target=".lock-info"
		hx-post={ fmt.Sprint("/lock/", id, "/addTime") }
		hx-include="next input"
	>{ renderTimeString(value, unit) }</button>
	<input type="hidden" name="timeToAdd" value={ fmt.Sprint(value, "", unit[:1]) } />
}

templ LockInfo(lock model.Lock) {
	<h1>Lock "{ lock.Name }"</h1>
	<p>Start time: <local-date>{ lock.StartTime.AsUTCString() }</local-date></p>
	<p>End time: <local-date>{ lock.EndTime.AsUTCString() }</local-date></p>
	<p>
		Total time:
		<lock-countdown
			start={ lock.StartTime.AsUTCString() }
			end={ lock.EndTime.AsUTCString() }
		></lock-countdown>
	</p>
	<p>
		Remaining time:
		<lock-countdown
			end={ lock.EndTime.AsUTCString() }
		></lock-countdown>
	</p>
}

templ LockView(lock model.Lock) {
	<p><a href="/">Back to list</a></p>
	<div class="lock-info">
		@LockInfo(lock)
	</div>
	if !lock.IsFinished() {
		<h3>Add time</h3>
		<p>
			@timeButton(lock.Id, 15, "minute")
			@timeButton(lock.Id, 30, "minute")
			@timeButton(lock.Id, 1, "hour")
			@timeButton(lock.Id, 2, "hour")
			@timeButton(lock.Id, 6, "hour")
			@timeButton(lock.Id, 12, "hour")
			@timeButton(lock.Id, 1, "day")
			@timeButton(lock.Id, 1, "week")
			@timeButton(lock.Id, 4, "week")
		</p>
	}
	<h3>API token</h3>
	@LockTokenForm(lock)
}