package account

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

templ Account(accounts []*types.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 *types.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"
			>
				@svg.Cancel()
				<span>
					Cancel
				</span>
			</button>
		</form>
	</div>
}

templ AccountItem(account *types.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">{ displayBalance(account.CurrentBalance) }</p>
			} else {
				<p class="mr-20 text-green-700">{ displayBalance(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>
}

func displayBalance(balance int64) string {

	euros := float64(balance) / 100
	return fmt.Sprintf("%.2f €", euros)
}