package pages

import (
	"git.hafen.run/lukas/timeshare/components/badge"
	"git.hafen.run/lukas/timeshare/components/button"
	"git.hafen.run/lukas/timeshare/components/checkbox"
	"git.hafen.run/lukas/timeshare/components/icon"
	"git.hafen.run/lukas/timeshare/components/table"
	"path"
	"time"
)

type File struct {
	Filename string
	Key      string
}

templ filetypeIcon(filename string) {
	switch path.Ext(filename) {
		case ".jpg",".jpeg", ".png",".heic", ".webp", ".avif", ".gif", ".tiff":
			@icon.FileImage()
		case ".mp3",".flac", ".m4a",".m4b", ".wav", ".midi":
			@icon.FileAudio()
		case ".mov",".mp4":
			@icon.FileVideo()
		case ".txt",".md":
			@icon.FileText()
		case ".zip":
			@icon.FileArchive()
		case ".xlsx", ".csv":
			@icon.FileSpreadsheet()
		case ".pdf", ".docx", ".doc":
			@icon.FileText()
		case ".epub":
			@icon.BookMarked()
		case ".stl", ".3mf", ".step":
			@icon.FileAxis3d()
		case ".json":
			@icon.FileJson()
		default:
			@icon.File()
	}
}

templ ListShareContents(expires time.Time, shareid string, files []File) {
	@PageSkeleton("Download - Time Share") {
		<div class="flex flex-col p-10 w-full">
			<div class="flex justify-between">
				<div class="sm:flex gap-2 items-center">
					<h1 class="text-2xl">Download from Share</h1>
					@badge.Badge(badge.Props{
						Class: "flex gap-2 items-center dark:text-white",
					}) {
						@icon.Timer()
						{ expires.Format("03:04PM Jan 2") }
					}
				</div>
				<a href={ "/download/" + shareid + "/zip" } id="download-link">
					@button.Button(button.Props{ID: "download-button"}) {
						@icon.FolderDown()
						Download All
					}
				</a>
			</div>
			<div class="flex flex-col justify-center items-center">
				<div class="w-full md:w-3/4">
					@table.Table() {
						@table.Header() {
							@table.Row() {
								@table.Head()
								@table.Head() {
									Filename
								}
							}
						}
						@table.Body() {
							for _, file := range files {
								@table.Row() {
									@table.Cell(table.CellProps{Class: "w-2"}) {
										@checkbox.Checkbox(checkbox.Props{
											Name:  file.Key,
											Value: file.Key,
										})
									}
									@table.Cell() {
										<span class="flex gap-2 items-center">
											@filetypeIcon(file.Filename)
											{ file.Filename }
										</span>
									}
								}
							}
						}
					}
				</div>
			</div>
		</div>
		<script>
		let checkedIds = [];
		let downloadButton; 
		let downloadLink; 
		let downloadLinkZip;
		let downloadIcon;
		let share_id;
		window.onload = () => {
			downloadButton = document.querySelector("#download-button");
			downloadLink = document.querySelector("#download-link");
			downloadLinkZip = document.querySelector("#download-link").href;
			downloadIcon = downloadLink.querySelector("svg").outerHTML;
			share_id = window.location.pathname;
		};
		document.querySelectorAll("input[type=checkbox]").forEach(el=>{
				el.addEventListener("click", el=>{
					checkedIds = Array.from(document.querySelectorAll("input[type=checkbox]:checked").values().map(el=>el.value))
					if (checkedIds.length == 0) {
						// nothing selected. download all
						downloadButton.innerHTML = downloadIcon + "Download All";
						downloadLink.href = downloadLinkZip;
						downloadButton.onclick = () => {};
					} else {
						// things selected!
						downloadButton.innerHTML = downloadIcon + "Download Selected";
						downloadLink.href = "#";
						downloadButton.onclick = () => {
							let delay = 0;
							for (const id of checkedIds) {
								console.log(id);
								const a = document.createElement("a");
								a.href = "/download" + share_id + "/" + id;
								document.body.appendChild(a);
								setTimeout(() => {
									a.click();
									a.remove();
								}, delay);
								delay += 200;
							}
						};
					}
				})
			})
		</script>
	}
}