package site

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

type ActiveSearchSignals struct {
	Search string `json:"search"`
}

type ActiveSearchUser struct {
	ID        string `json:"id"`
	FirstName string `json:"firstName"`
	LastName  string `json:"lastName"`
	Email     string `json:"email"`
}

templ ActiveSearchComponent(filteredUsers []*ActiveSearchUser, scores map[string]float64, signals *ActiveSearchSignals) {
	<div
		id="active_search"
		class="flex flex-col gap-4"
		data-signals={ templ.JSONString(signals) }
	>
		<div class="flex">
			<input
				id="searchInput"
				class="flex-1 input input-bordered"
				type="text"
				placeholder="Search..."
				data-bind-search
				data-on-input__debounce.500ms={ datastar.GetSSE("/examples/active_search/updates") }
				data-indicator-fetching
			/>
			@sseIndicator("fetching")
		</div>
		<table class="table w-full">
			<caption>Contacts</caption>
			<thead>
				<tr>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Email</th>
					<th>Score</th>
				</tr>
			</thead>
			<tbody id="active_search_rows">
				for _,user := range filteredUsers[0:10] {
					<tr>
						<td>{ user.FirstName }</td>
						<td>{ user.LastName }</td>
						<td>{ user.Email }</td>
						<td>{ fmt.Sprintf("%0.2f", scores[user.ID]) }</td>
					</tr>
				}
			</tbody>
		</table>
		@templSignalsJSON()
	</div>
}