package pages

import (
	"fmt"
	"git.hafen.run/lukas/timeshare/components/button"
	"git.hafen.run/lukas/timeshare/components/label"
	"git.hafen.run/lukas/timeshare/components/radio"
	"git.hafen.run/lukas/timeshare/components/toast"
)

type Expiry struct {
	DurationCode string
	DurationName string
}

templ Upload(expirations []Expiry, uploadedLink string) {
	@PageSkeleton("Upload - Time Share") {
		if uploadedLink != "" {
			@toast.Toast(toast.Props{
				Title:       "Share Created!",
				Description: fmt.Sprintf(`<a class="underline" href="%s">%s</a>`, uploadedLink, uploadedLink),
				Variant:     toast.VariantSuccess,
				Duration:    120000, // 2 min
				Position:    toast.PositionBottomCenter,
				Dismissible: true,
				Icon:        true,
			})
		}
		<div class="flex flex-col p-10 w-full h-screen justify-center items-center">
			<form class="flex flex-col items-center gap-2" method="POST" enctype="multipart/form-data">
				<h1 class="text-3xl font-medium pb-4">Time Share Upload</h1>
				<input type="file" class="hidden" id="files" name="files" multiple/>
				<div class="border-2 border-dashed rounded-xl border-gray-400 flex flex-col justify-center items-center p-10" id="drop_zone">
					<p id="desc" class="w-[39ch] text-center">Drop files onto here or click to upload</p>
				</div>
				<script>
					let drop_zone = document.getElementById("drop_zone");
					let desc = document.getElementById("desc");
					let fileInput = document.getElementById("files");
					function updateDescription(len) {
						desc.innerText = `${len} File`
						if (len > 1) {
							desc.innerText += "s"
						}
						desc.innerText += " Attached"
					}
					fileInput.addEventListener("change", () => {
						updateDescription(fileInput.files.length)
					});
					drop_zone.addEventListener("click", function (ev) {
							fileInput.click();
						})
					drop_zone.addEventListener("drop", function (ev) {
						ev.preventDefault();
						drop_zone.classList.remove('dragover');
						const dt = ev.dataTransfer;
						if (!dt) return

						const files = Array.from(dt.files); // iterable

						const newDT = new DataTransfer();
						files.forEach(f => newDT.items.add(f));
						fileInput.files = newDT.files;
						updateDescription(fileInput.files.length)
					});
					drop_zone.addEventListener("dragover", function (e) {
						drop_zone.classList.add('dragover');
						e.preventDefault();
					});
					drop_zone.addEventListener("dragleave", function (e) {
						drop_zone.classList.remove('dragover');
						e.preventDefault();
					});
				</script>
				<style>.dragover {border-color: #00C950;}</style>
				<div class="flex flex-col gap-3 w-full">
					<p>Expiration:</p>
					<div class="pl-2 flex flex-col gap-3">
						for i, expiry := range expirations {
							<div class="flex items-start gap-3">
								@radio.Radio(radio.Props{
									ID:      expiry.DurationCode,
									Name:    "expiry",
									Value:   expiry.DurationCode,
									Checked: i == 0,
								})
								@label.Label(label.Props{
									For: expiry.DurationCode,
								}) {
									{ expiry.DurationName }
								}
							</div>
						}
					</div>
					@button.Button(button.Props{
						Type: "submit",
					}) {
						Upload
					}
				</div>
			</form>
		</div>
	}
}