package account

import "spend-sparrow/internal/template/svg"
import "spend-sparrow/internal/types"

templ template(accounts []*Account) {
	<div class="max-w-6xl mt-10 mx-auto">
		<button
			hx-get="/account/new"
			hx-target="#account-items"
			hx-swap="afterbegin"
			class="ml-auto button button-primary px-2 flex-1 flex items-center gap-2 justify-center"
		>
			@svg.Plus()
			<p>New Account</p>
		</button>
		<div id="account-items" class="my-6 flex flex-col items-center">
			for _, account := range accounts {
				@accountItem(account)
			}
		</div>
	</div>
}

templ editAccount(account *Account) {
	{{
		var (
			name      string
			id        string
			cancelUrl string
		)
		if account == nil {
			name = ""
			id = "new"
			cancelUrl = "/empty"
		} else {
			name = account.Name
			id = account.Id.String()
			cancelUrl = "/account/" + id
		}
	}}
	<div id="account" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
		<form
			hx-post={ "/account/" + id }
			hx-target="closest #account"
			hx-swap="outerHTML"
			class="text-xl flex justify-end gap-4 items-center"
		>
			<input
				autofocus
				name="name"
				type="text"
				value={ name }
				placeholder="Account Name"
				class="mr-auto bg-white input"
			/>
			<button type="submit" class="button button-neglect px-1 flex items-center gap-2">
				@svg.Save()
				<span>
					Save
				</span>
			</button>
			<button
				hx-get={ cancelUrl }
				hx-target="closest #account"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				<span class="h-4 w-4">
					@svg.Cancel()
				</span>
				<span>
					Cancel
				</span>
			</button>
		</form>
	</div>
}

templ accountItem(account *Account) {
	<div id="account" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
		<div class="text-xl flex justify-end gap-4">
			<p class="mr-auto">{ account.Name }</p>
			if account.CurrentBalance < 0 {
				<p class="mr-20 text-red-700">{ types.FormatEuros(account.CurrentBalance) }</p>
			} else {
				<p class="mr-20 text-green-700">{ types.FormatEuros(account.CurrentBalance) }</p>
			}
			<a
				href={ templ.URL("/transaction?account-id=" + account.Id.String()) }
				class="button button-neglect px-1 flex items-center gap-2"
				title="View transactions"
			>
				@svg.Eye()
				<span>
					View
				</span>
			</a>
			<button
				hx-get={ "/account/" + account.Id.String() + "?edit=true" }
				hx-target="closest #account"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				@svg.Edit()
				<span>
					Edit
				</span>
			</button>
			<button
				hx-delete={ "/account/" + account.Id.String() }
				hx-target="closest #account"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
				hx-confirm="Are you sure you want to delete this account?"
			>
				@svg.Delete()
				<span>
					Delete
				</span>
			</button>
		</div>
	</div>
}