<script>
import { onMount } from "svelte";
import { formatDate } from "util/Formatting";
import Button from "layout/Button.svelte";
import { loading_finish, loading_start } from "lib/Loading";

let year = 0
let month = 0
let month_str = ""
let data = []

const load_activity = async () => {
	month_str = year + "-" + ("00"+(month)).slice(-2)
	loading_start()
	try {
		const resp = await fetch(window.api_endpoint+"/user/activity/" + month_str)
		if(resp.status >= 400) {
			let json = await resp.json()
			if (json.value === "authentication_failed") {
				window.location = "/login"
				return
			} else {
				throw new Error(json.message)
			}
		}

		data = await resp.json()
	} catch (err) {
		alert(err)
	} finally {
		loading_finish()
	}
};
const last_month = () => {
	month--
	if (month === 0) {
		month = 12
		year--
	}

	load_activity()
}
const next_month = () => {
	month++
	if (month === 13) {
		month = 1
		year++
	}

	load_activity()
}
onMount(() => {
	let now = new Date()
	year = now.getFullYear()
	month = now.getMonth()+1

	load_activity()
})
</script>

<div class="toolbar">
	<Button click={last_month} icon="chevron_left"/>
	<div class="toolbar_spacer">
		{month_str}
	</div>
	<Button click={next_month} icon="chevron_right"/>
</div>

{#if data.length === 0}
	<div class="center">
		Removed or expired files will show up here
	</div>
{:else}
	<div class="table_scroll">
		<table style="text-align: left;">
			<thead>
				<tr>
					<td>Time</td>
					<td>File name</td>
					<td>Event</td>
				</tr>
			</thead>
			<tbody>
				{#each data as row}
					<tr>
						<td>
							{formatDate(row.time, true, true, false)}
						</td>
						<td>
							{#if row.event === "file_instance_blocked"}
								<a href="/u/{row.file_id}">{row.file_name}</a>
							{:else if row.event === "filesystem_node_blocked"}
								<a href="/d/{row.file_id}">{row.file_name}</a>
							{:else}
								{row.file_name}
							{/if}
						</td>
						<td>
							{#if row.event === "file_instance_blocked" || row.event === "filesystem_node_blocked"}
								Blocked for abuse
							{:else if row.event === "file_instance_expired"}
								Expired
							{:else if row.event === "file_instance_lost"}
								File has been lost
							{:else if row.event === "filesystem_node_lost"}
								Filesystem node has been lost
							{/if}
						</td>
					</tr>
				{/each}
			</tbody>
		</table>
	</div>
{/if}


<style>
.toolbar {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.toolbar > * {
	flex: 0 0 auto;
}
.toolbar_spacer {
	flex: 1 1 auto;
	text-align: center;
	align-content: center;
	font-size: 1.2em;
}
.center {
	text-align: center;
}
</style>
