package site

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

type EditRowSignals struct {
	EditRowIndex int    `json:"editRowIndex"`
	Name         string `json:"name"`
	Email        string `json:"email"`
}

templ EditRowContact(contacts []*ContactEdit, i int, isEditingRow, isEditingAnyRow bool) {
	{{
	contact := contacts[i]
	contactKeyPrefix := fmt.Sprintf("contact_%d", i)
	}}
	<tr
		id={ contactKeyPrefix }
	>
		<td class="text-center">
			if isEditingRow {
				<input
					type="text"
					class="input input-bordered"
					data-bind-name
					data-testid={ contactKeyPrefix + "_name" }
				/>
			} else {
				<div>{ contact.Name }</div>
			}
		</td>
		<td class="text-center">
			if isEditingRow {
				<input
					type="text"
					class="input input-bordered"
					data-bind-email
					data-testid={ contactKeyPrefix + "_email" }
				/>
			} else {
				<div>{ contact.Email }</div>
			}
		</td>
		<td class="text-right">
			if isEditingAnyRow {
				if isEditingRow {
					<div class="flex gap-2">
						<button
							class="btn btn-sm btn-error"
							data-on-click={ datastar.GetSSE("/examples/edit_row/data") }
							data-testid={ contactKeyPrefix + "_cancel" }
						>
							@icon("material-symbols:cancel")
							Cancel
						</button>
						<button
							class="btn btn-sm btn-success"
							data-on-click={ datastar.PatchSSE("/examples/edit_row/edit") }
							data-testid={ contactKeyPrefix + "_save" }
						>
							@icon("material-symbols:save")
							Save
						</button>
					</div>
				}
			} else {
				<button
					class="btn btn-sm btn-accent"
					data-on-click={ fmt.Sprintf(
						"editRowIndex.value = %d; %s", i,
						datastar.GetSSE("/examples/edit_row/edit"),
					) }
					data-testid={ contactKeyPrefix + "_edit" }
				>
					@icon("material-symbols:edit")
					Edit
				</button>
			}
		</td>
	</tr>
}

templ EditRowContacts(contacts []*ContactEdit, signals *EditRowSignals) {
	<div
		id="edit_row"
		class="flex flex-col"
		data-signals={ templ.JSONString(signals) }
	>
		<table class="table w-full">
			<caption>Contacts</caption>
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th class="text-righ">Actions</th>
				</tr>
			</thead>
			<tbody id="edit_row_table_body">
				for i := range contacts {
					@EditRowContact(contacts, i, i == signals.EditRowIndex, signals.EditRowIndex != -1)
				}
			</tbody>
		</table>
		<div>
			<button
				class="btn btn-warning"
				data-on-click={ datastar.GetSSE("/examples/edit_row/reset") }
				data-testid="reset"
			>
				@icon("material-symbols:refresh")
				Reset
			</button>
		</div>
	</div>
}