<script lang="ts">
	import Cube from '$lib/icons/Cube.svelte';
	import Edit from '$lib/icons/Edit.svelte';
	import Trash from '$lib/icons/Trash.svelte';
	import shortenFileSize from '$lib/helper/shortenFileSize';
	import timeElapsed from '$lib/helper/timeElapsed';

	export let data;
	export let i;

	let crimesList = data.crimesList;
	let item = crimesList[i];

	let admin = data.user?.admin;
	let link = `/view/${item.prefix}/${item.name}?token=${data.caseToken}`;

	console.log('Debug Mina', crimesList, data);

	function editName() {
		console.log('Edit Name');
	}

	function deleteCase() {
		console.log('Delete Case');
	}

	function checkIsEmpty() {
		if (!item.name) console.log('Das Feld ist leer');
	}

	function cancelEdit() {
		console.log('Bearbeitung abgebrochen');
	}
</script>

<a href={link} class="flex justify-between items-center gap-x-6 py-5">
	<div class=" flex gap-x-4">
		<Cube class="h-auto" />
		<div class="min-w-0 flex-auto">
			{#if admin}
				<input
					class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
					type="text"
					value={item.name}
					on:click|preventDefault={(ev) => {
						editName();
					}}
				/>

				<button
					class="p-2"
					on:click|preventDefault={(ev) => {
						editName();
					}}
				>
					<Edit />
				</button>

				<button
					class="p-2"
					on:click|preventDefault={async (ev) => {
						deleteCase();
					}}
				>
					<Trash />
				</button>
			{:else}
				<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1">
					{item.name}
				</span>
			{/if}

			<p class="mt-1 truncate text-xs leading-5 text-gray-500">{shortenFileSize(item.size)}</p>
		</div>
	</div>
	<div class="hidden sm:flex sm:flex-col sm:items-end">
		<p class="text-sm leading-6 text-gray-900">3D Tatort</p>

		<p class="mt-1 text-xs leading-5 text-gray-500">
			Zuletzt geändert <time datetime="2023-01-23T13:23Z"
				>{timeElapsed(new Date(item.lastModified))}</time
			>
		</p>
	</div>
</a>
