package view

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

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

templ TimerView(timer model.Timer) {
	<div class="timer">
		<h1>Timer "{ timer.Name }"</h1>
		<p><a href="/">Back to list</a></p>
		<p>Start time: <local-date>{ timer.StartTime.AsUTCString() }</local-date></p>
		<p>End time: <local-date>{ timer.EndTime.AsUTCString() }</local-date></p>
		<p>
			Total time:
			<timer-countdown
				start={ timer.StartTime.AsUTCString() }
				end={ timer.EndTime.AsUTCString() }
			></timer-countdown>
		</p>
		<p>
			Remaining time:
			<timer-countdown
				end={ timer.EndTime.AsUTCString() }
			></timer-countdown>
		</p>
		if !timer.IsFinished() {
			<h3>Add time</h3>
			<p>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/15m") }>15 minutes</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/30m") }>30 minutes</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1h") }>1 hour</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/2h") }>2 hours</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/6h") }>6 hours</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/12h") }>12 hours</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1d") }>1 day</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1w") }>1 week</button>
				<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/4w") }>4 weeks</button>
			</p>
		}
		<h3>API token</h3>
		@TimerTokenForm(timer)
	</div>
}