<script lang="ts">
	import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
	import type BookTrackerPlugin from "@src/main";
	import { getMetadataContext } from "@ui/stores/metadata.svelte";
	import Rating from "@ui/components/Rating.svelte";
	import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
	import OpenFileLink from "./OpenFileLink.svelte";
	import BookCover from "./BookCover.svelte";

	interface Props {
		plugin: BookTrackerPlugin;
		settings: ShelfSettings;
	}

	const { plugin, settings }: Props = $props();

	const metadataStore = getMetadataContext();
</script>

<table>
	<thead>
		<tr>
			<th>Cover</th>
			<th>Title</th>
			<th>Authors</th>
			<th>Series</th>
			<th>#</th>
			{#if settings.statusFilter === STATUS_IN_PROGRESS || settings.statusFilter === STATUS_READ}
				<th>Start Date</th>
			{/if}
			{#if settings.statusFilter === STATUS_READ}
				<th>End Date</th>
				<th>Rating</th>
			{/if}
		</tr>
	</thead>
	<tbody>
		{#each metadataStore.metadata as meta}
			<tr>
				<td class="cover">
					<BookCover app={plugin.app} book={meta.book} size={50} />
				</td>
				<td>
					<OpenFileLink file={meta.file}>
						{meta.book.title}
					</OpenFileLink>
				</td>
				<td>
					{meta.book.authors.join(", ")}
				</td>
				<td>
					{meta.book.seriesTitle}
				</td>
				<td>
					{meta.book.seriesPosition}
				</td>
				{#if settings.statusFilter === STATUS_IN_PROGRESS || settings.statusFilter === STATUS_READ}
					<td>
						<datetime
							datetime={meta.book.startDate.format("LLLL")}
							title={meta.book.startDate.format("LLLL")}
						>
							{meta.book.startDate.format("ll")}
						</datetime>
					</td>
				{/if}
				{#if settings.statusFilter === STATUS_READ}
					<td>
						<datetime
							datetime={meta.book.endDate.format("LLLL")}
							title={meta.book.endDate.format("LLLL")}
						>
							{meta.book.endDate.format("ll")}
						</datetime>
					</td>
					<td>
						<Rating rating={meta.book.rating} />
					</td>
				{/if}
			</tr>
		{/each}
	</tbody>
</table>

<style lang="scss">
	table {
		border-collapse: collapse;
		width: 100%;

		td {
			text-align: center;
			vertical-align: middle;

			&.cover {
				padding: 0;
				margin: 0;
			}
		}
	}
</style>
