<script lang="ts">
	import type { FullArchiveFragment } from '$gql/graphql';
	import { formatListSize, joinText } from '$lib/Utils';
	import Card, { comicCard } from '$lib/components/Card.svelte';
	import ComicPills from '$lib/pills/ComicPills.svelte';
	import { formatDistance, formatISO9075 } from 'date-fns';
	import { filesize } from 'filesize';
	import Header from './DetailsHeader.svelte';
	import Section from './DetailsSection.svelte';

	export let archive: FullArchiveFragment;

	const now = Date.now();
	const modifiedDate = new Date(archive.mtime);
	const createdDate = new Date(archive.createdAt);

	const title = joinText(['Archive', formatListSize('image', archive.pageCount)]);
</script>

<div class="flex flex-col gap-4 text-sm">
	<Header {title} />
	<div class="grid grid-cols-3 gap-4">
		<Section title="Size">
			<span>{filesize(archive.size, { base: 2 })}</span>
		</Section>
		<Section title="Created">
			<span title={formatISO9075(createdDate)}>
				{formatDistance(createdDate, now, { addSuffix: true })}
			</span>
		</Section>
		<Section title="File last modified">
			<span title={formatISO9075(modifiedDate)}>
				{formatDistance(modifiedDate, now, { addSuffix: true })}
			</span>
		</Section>
	</div>

	{#if archive.comics.length > 0}
		<div class="flex flex-col gap-1">
			<h2 class="text-base font-medium">Comics</h2>
			<div class="flex shrink-0 flex-col gap-4">
				{#each archive.comics as comic}
					<Card compact {...comicCard(comic)}>
						<ComicPills {comic} />
					</Card>
				{/each}
			</div>
		</div>
	{/if}
</div>