package site

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

type AnimationsRestoreSignals struct {
	ShouldRestore bool `json:"shouldRestore"`
}

templ animationsViewTransition(signals *AnimationsRestoreSignals) {
	<div
		id="view_transition"
		data-signals={ templ.JSONString(signals) }
		class="slide-it"
	>
		<button
			class="btn btn-primary btn-lg"
			data-on-click={ datastar.GetSSE("/examples/animations/data/view_transition") }
		>
			if signals.ShouldRestore {
				@icon("material-symbols:arrow-left")
				Restore It!
			} else {
				@icon("material-symbols:arrow-right")
				"Swap It!"
			}
		</button>
	</div>
}

templ animationsFadeOutSwap(shouldHide bool) {
	<button
		id="fade_out_swap"
		class={
			"btn btn-error",
			templ.KV("transition-all duration-1000 opacity-0", shouldHide),
		}
		data-on-click="sse('/examples/animations/data', {method:'delete'})"
	>
		@icon("material-symbols:delete")
		Fade out then delete on click
	</button>
}

templ animationsFadeMeIn(shouldBeShown bool) {
	<button
		id="fade_me_in"
		class={ "btn btn-success",
			templ.KV("transition-all duration-1000", shouldBeShown),
			templ.KV("opacity-0", !shouldBeShown) }
		data-on-click={ datastar.GetSSE("/examples/animations/data/fade_me_in") }
	>
		@icon("material-symbols:add")
		Fade me in on click
	</button>
}

type AnimationsColor struct {
	Label string `json:"label"`
	Value int    `json:"value"`
}

templ animationsColorThrob(fg, bg AnimationsColor) {
	{{ styl := fmt.Sprintf("color: #%x; background-color: #%x", fg.Value, bg.Value) }}
	<div
		id="color_throb"
		class="p-4 text-2xl font-bold text-center uppercase transition-all duration-1000 rounded-box"
		{ templ.Attributes{"style": styl}... }
	>
		{ fg.Label } on { bg.Label }
	</div>
}

templ animationsRequestInFlight() {
	<div id="request_in_flight" class="flex flex-col gap-4">
		<div class="form-control">
			<label class="label label-text">Name</label>
			<div class="flex items-center gap-2">
				<input
					type="text"
					name="name"
					class="flex-1 input input-primary"
				/>
				@sseIndicator("fetching")
			</div>
		</div>
		<button
			id="submit_request_in_flight"
			class="btn btn-success"
			data-on-click={ datastar.PostSSE("/examples/animations/data/request_in_flight") }
			data-indicator-fetching
		>
			@icon("material-symbols:person-add")
			Submit
		</button>
	</div>
}