<script lang="ts">
	import type BookTrackerPlugin from "@src/main";
	import type { ReadingLogEntry } from "@utils/ReadingLog";
	import FileSuggest from "@ui/components/suggesters/FileSuggest.svelte";
	import { v4 as uuidv4 } from "uuid";
	import { createPrevious } from "@ui/stores/previous.svelte";
	import { createMetadata } from "@ui/stores/metadata.svelte";
	import {
		createSettings,
		setSettingsContext,
	} from "@ui/stores/settings.svelte";
	import moment from "@external/moment";
	import { setAppContext } from "@ui/stores/app";
	import {
		createReadingLog,
		setReadingLogContext,
	} from "@ui/stores/reading-log.svelte";
	import { onDestroy } from "svelte";

	const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";

	interface Props {
		plugin: BookTrackerPlugin;
		entry?: ReadingLogEntry;
		onSubmit?: (entry: ReadingLogEntry) => void;
	}

	let { plugin, entry, onSubmit }: Props = $props();
	setAppContext(plugin.app);

	const settingsStore = createSettings(plugin);
	setSettingsContext(settingsStore);

	const readingLogStore = createReadingLog(plugin.readingLog);
	setReadingLogContext(readingLogStore);

	const metadataStore = createMetadata(plugin, {
		statusFilter: null,
	});

	const editMode = $derived(entry !== undefined);
	let book = $state(entry?.book ?? "");
	const bookMetadata = $derived(
		metadataStore.metadata.find((m) => m.file.basename === book),
	);
	const lastEntryIndex = $derived(
		readingLogStore.entries.findLastIndex((e) => e.book === book),
	);
	const lastEntry = $derived(
		lastEntryIndex !== -1 ? readingLogStore.entries[lastEntryIndex] : null,
	);

	const pageCount = $derived(bookMetadata?.book.pageCount ?? 0);
	let pagesRead = $state(entry?.pagesRead ?? 0);
	const pagesReadPrev = createPrevious(() => pagesRead);
	let pagesReadTotal = $state(entry?.pagesReadTotal ?? 0);
	let pagesRemaining = $state(entry?.pagesRemaining ?? 0);
	let createdAt = $state(
		entry?.createdAt?.format(INPUT_DATETIME_FORMAT) ??
			moment().format(INPUT_DATETIME_FORMAT),
	);

	$effect(() => {
		pagesReadTotal = (lastEntry?.pagesReadTotal ?? 0) + pagesRead;
	});

	$effect(() => {
		const diff = pagesRead - (pagesReadPrev.value ?? 0);
		pagesRead = pagesRead;
		pagesReadTotal = pagesReadTotal + diff;
	});

	$effect(() => {
		pagesRemaining = pageCount - pagesReadTotal;
	});

	$effect(() => {
		pagesReadTotal = Math.max(pagesReadTotal, pagesRead);
	});

	$effect(() => {
		pagesRemaining = Math.max(pagesRemaining, 0);
	});

	function onsubmit(ev: SubmitEvent) {
		ev.preventDefault();
		onSubmit?.({
			id: entry?.id ?? uuidv4(),
			book,
			pagesRead,
			pagesReadTotal,
			pagesRemaining,
			createdAt: moment(createdAt),
		});
	}

	onDestroy(() => {
		settingsStore.destroy();
		metadataStore.destroy();
		readingLogStore.destroy();
	});
</script>

<div class="obt-reading-log-entry-editor">
	<h2>{editMode ? "Edit" : "Create"} Reading Log Entry</h2>
	<form {onsubmit}>
		<div class="fields">
			<label for="book">Book</label>
			<FileSuggest
				id="book"
				property="basename"
				folderFilter={[
					plugin.settings.tbrFolder,
					plugin.settings.readBooksFolder,
				]}
				bind:value={book}
			/>
			<label for="pagesRead">Pages Read</label>
			<input
				type="number"
				name="pagesRead"
				id="pagesRead"
				bind:value={pagesRead}
			/>
			<label for="pagesReadTotal">Pages Read Total</label>
			<input
				type="number"
				name="pagesReadTotal"
				id="pagesReadTotal"
				bind:value={pagesReadTotal}
			/>
			<label for="pagesRemaining">Pages Remaining</label>
			<input
				type="text"
				inputmode="numeric"
				pattern="[0-9]*"
				name="pagesRemaining"
				id="pagesRemaining"
				bind:value={pagesRemaining}
			/>
			<label for="createdAt">Created At</label>
			<input
				type="datetime-local"
				name="createdAt"
				id="createdAt"
				bind:value={createdAt}
			/>
		</div>
		<button type="submit">Submit</button>
	</form>
</div>

<style lang="scss">
	.obt-reading-log-entry-editor {
		margin-bottom: var(--size-4-4);

		h2 {
			margin-bottom: var(--size-4-6);
		}

		form {
			display: flex;
			flex-direction: column;
			gap: var(--size-4-4);

			.fields {
				display: grid;
				grid-template-columns: max-content 1fr;
				gap: var(--size-4-4);
				align-items: center;

				input:disabled {
					color: var(--text-muted);
					cursor: not-allowed;
				}
			}
		}
	}
</style>
