<script lang="ts">
import { formatDataVolume, formatDate } from "util/Formatting";
import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
import { FSNavigator } from "filesystem/FSNavigator";

let {
	nav,
	root_path = "/me",
}: {
	nav: FSNavigator
	root_path?: string
} = $props();

let entries: TrashEntry[] = $state([]);
let error: string = $state("");

const load = async () => {
	loading_run(async () => {
		try {
			entries = await fs_get_trash(root_path)
			error = "";
		} catch (err: any) {
			error = err?.message ?? JSON.stringify(err);
		}
	})
};

const delete_entry = async (entry: TrashEntry) => {
	if (!confirm(`Permanently delete "${entry.node.name}"?`)) return;
	try {
		loading_start();
		await fs_check_response(
			await fetch(fs_path_url(entry.node.path) + "?trash", { method: "DELETE" })
		);
		entries = entries.filter(e => e.node.id !== entry.node.id);
	} catch (err: any) {
		alert(err?.message ?? JSON.stringify(err));
	} finally {
		loading_finish();
	}
};

const restore_entry = async (entry: TrashEntry) => {
	if (!entry.original_path) {
		alert("Original path is not known, cannot restore this file.");
		return;
	}
	try {
		loading_start();
		const form = new FormData();
		form.append("action", "rename");
		form.append("target", "/me" + entry.original_path);
		await fs_check_response(
			await fetch(fs_path_url(entry.node.path), { method: "POST", body: form })
		);
		entries = entries.filter(e => e.node.id !== entry.node.id);
	} catch (err: any) {
		alert(err?.message ?? JSON.stringify(err));
	} finally {
		loading_finish();
	}
};

const empty_trash = async () => {
	if (!confirm("Permanently delete all items in the trash?")) return;
	try {
		loading_start();
		await fs_check_response(
			await fetch(fs_path_url(root_path) + "?empty_trash", { method: "DELETE" })
		);
		entries = [];
	} catch (err: any) {
		alert(err?.message ?? JSON.stringify(err));
	} finally {
		loading_finish();
	}
};

onMount(() => {
	breadcrumbs_store.set(breadcrumbs)

	load()
});
</script>


{#snippet breadcrumbs()}
		<i class="icon">delete</i>
		<div>
			Trash bin
			{#if $loading_store === 0 && entries.length === 0}
				(empty)
			{:else if entries.length !== 0}
				({formatDataVolume(entries.reduce(
					(acc, entry) => acc + entry.node.file_size, 0
				), 3)})
			{/if}
		</div>
		<div class="separator"></div>
		<button onclick={() => window.history.back()} title="Back">
			<i class="icon">arrow_back</i>
		</button>
		<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
			<i class="icon">north</i>
		</button>
		<button onclick={() => nav.reload()} title="Refresh directory listing">
			<i class="icon">refresh</i>
		</button>
		{#if entries.length !== 0}
			<button class="button button_red" onclick={empty_trash}>
				<i class="icon">delete_forever</i>
				<span>Delete all</span>
			</button>
		{/if}
{/snippet}

{#if error}
	<p class="error">{error}</p>
{:else if entries.length > 0}
	<table class="trash_table">
		<thead>
			<tr>
				<td></td>
				<td>Name</td>
				<td class="hide_small">Original location</td>
				<td class="hide_small">Deleted at</td>
				<td class="hide_small">Size</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			{#each entries as entry (entry.node.id)}
				<tr class="entry">
					<td class="icon_cell">
						<img
							src={fs_node_icon(entry.node, 32, 32)}
							class="node_icon"
							alt="icon"
						/>
					</td>
					<td class="name_cell">
						<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
							{entry.node.name}
						</a>
					</td>
					<td class="hide_small">
						{entry.original_path ? entry.original_path.slice(0, -entry.node.name.length) : "—"}
					</td>
					<td class="hide_small">
						{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
					</td>
					<td class="hide_small">
						{#if entry.node.type === "file"}
							{formatDataVolume(entry.node.file_size, 3)}
						{/if}
					</td>
					<td>
						<div class="row_actions">
							<button title="Restore to original location" onclick={() => restore_entry(entry)}>
								<i class="icon">restore_from_trash</i>
							</button>
							<button class="button button_red" title="Delete permanently" onclick={() => delete_entry(entry)}>
								<i class="icon">delete_forever</i>
							</button>
						</div>
					</td>
				</tr>
			{/each}
		</tbody>
	</table>
{/if}

<style>
.separator {
	flex: 1 1 auto;
}
.error {
	color: var(--danger_color, #c0392b);
}
.trash_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--body_background);
	border-radius: 8px;
}
.trash_table td {
	padding: 0;
}
.entry {
	cursor: default;
	border-top: 1px solid var(--separator);
}
.entry:hover {
	background: var(--input_hover_background);
}
.icon_cell {
	width: 2.5em;
}
.node_icon {
	display: block;
	width: 2em;
	height: 2em;
	object-fit: contain;
}
.name_cell {
	word-break: break-all;
}
.entry_link {
	color: var(--body_text_color);
	text-decoration: none;
}
.entry_link:hover {
	text-decoration: underline;
}
.row_actions {
	display: flex;
	gap: 0.25em;
}
@media (max-width: 600px) {
	.hide_small {
		display: none;
	}
}
</style>
