package site

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

type QuickPrimerGoSignals struct {
	Input string `json:"input"`
	Show  bool   `json:"show"`
}

templ QuickPrimerGoView(signals *QuickPrimerGoSignals) {
	<div id="replaceMe" data-signals={ templ.JSONString(signals) }>
		<h2>Go Datastar Example</h2>
		<main id="main" class="container flex flex-col gap-4">
			<input type="text" class="input input-bordered" placeholder="Type here!" data-bind-input />
			<div data-text="input.value"></div>
			<button class="btn btn-accent" data-on-click="show.value = !show.value">Toggle</button>
			<div data-show="show.value">
				<span>Hello from Datastar!</span>
			</div>
			<div id="output">#output</div>
			<button
				class="btn btn-accent"
				data-on-click={ datastar.PutSSE("/examples/quick_primer_go/data") }
			>Send State</button>
			<div id="output2">#output2</div>
			<button
				class="btn btn-accent"
				data-on-click={ datastar.GetSSE("/examples/quick_primer_go/data") }
			>
				Get State
			</button>
			<div>
				<span>Feed from server: </span>
				<span
					id="feed"
					data-on-load={ datastar.GetSSE("/examples/quick_primer_go/data/feed") }
				></span>
			</div>
		</main>
	</div>
}

templ QuickPrimerGoPut(signals *QuickPrimerGoSignals) {
	<div id="output">Your input: { signals.Input }, is { fmt.Sprint(len(signals.Input)) } characters long.</div>
}

templ QuickPrimerGoGet(stateStr string) {
	<div id="output2">Backend state: { stateStr }</div>
}

templ QuickPrimerCheckThisOut() {
	<div>Check this out!</div>
}

templ QuickPrimerGoFeed(feed string) {
	<span id="feed">{ feed }</span>
}