package site

import datastar "github.com/starfederation/datastar/sdk/go"

type FileUploadSignals struct {
	FilesBase64 []string `json:"files"`
	FileMimes   []string `json:"filesMimes"`
	FileNames   []string `json:"filesNames"`
}

templ FileUploadView(signals *FileUploadSignals) {
	<div
		id="file_upload"
		class="flex flex-col gap-4"
		data-signals={ templ.JSONString(signals) }
	>
		<div class="flex flex-col gap-2">
			<label
				for="file_input"
				class="block mb-2 text-sm font-medium text-primary-100"
			>
				Pick anything &lt; 1MiB sized
			</label>
			<input
				id="file_input"
				type="file"
				data-bind-files
				multiple
				class="w-full file-input file-input-bordered"
			/>
		</div>
		<button
			class="btn btn-primary"
			data-on-click={ datastar.PostSSE("/examples/file_upload/upload") }
			data-show="!!files.value?.length"
		>
			Submit
		</button>
	</div>
}

templ FileUpdateAlert(err error) {
	<div id="file_upload" class="alert alert-error">
		@icon("material-symbols:error-icon")
		Error: { err.Error() }
	</div>
}

templ FileUploadResults(signals *FileUploadSignals, humainzeByteCount, humanizedHashes []string) {
	<table id="file_upload" class="table w-full table-compact table-zebra">
		<caption>File Upload Results</caption>
		<thead>
			<tr>
				<th>Name</th>
				<th>Sizes</th>
				<th>Mimes</th>
				<th>XXH3 Hashes</th>
			</tr>
		</thead>
		<tbody>
			for i := range signals.FileNames {
				<tr>
					<td class="font-bold text-center">{ signals.FileNames[i] }</td>
					<td class="text-center">{ humainzeByteCount[i] }</td>
					<td class="text-center">{ signals.FileMimes[i] }</td>
					<td class="overflow-hidden font-mono text-xs text-center text-ellipsis">{ humanizedHashes[i] }</td>
				</tr>
			}
		</tbody>
	</table>
}