<script lang="ts">
	import displayUnresolved from '../../stores/displayUnresolved';
	import closeAnimeByDefault from '../../stores/closeAnimeByDefault';
	import closeMangaByDefault from '../../stores/closeMangaByDefault';
	import { chapterDatabase } from '$lib/chapterDatabase';
	import cacheMangaMinutes from '../../stores/cacheMangaMinutes';
	import cacheMinutes from '../../stores/cacheMinutes';
	import roundDownChapters from '../../stores/roundDownChapters';
	import sortByDifference from '../../stores/sortByDifference';

	export let data;

	const pruneUnresolved = async () => {
		const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();

		const ids = unresolved.map((m) => m.id);

		await chapterDatabase.chapters.bulkDelete(ids);
	};
	const pruneAll = async () => {
		const all = await chapterDatabase.chapters.toArray();

		const ids = all.map((m) => m.id);

		await chapterDatabase.chapters.bulkDelete(ids);
	};
	const resetSettings = () => {
		displayUnresolved.set('false');
		roundDownChapters.set('true');
		closeAnimeByDefault.set('false');
		closeMangaByDefault.set('false');
		sortByDifference.set('true');
		cacheMinutes.set('30');
		cacheMangaMinutes.set('60');
	};
</script>

<a href="/">Home</a>

<p />

{#if data.user === undefined}
	Please log in to modify settings.
{:else}
	<ul>
		<li>
			<a
				href="#"
				on:click={() =>
					$displayUnresolved === 'true'
						? displayUnresolved.set('false')
						: displayUnresolved.set('true')}
				>{$displayUnresolved === 'true' ? 'Hide' : 'Show'} unresolved</a
			>
			<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>
		</li>
		<li>
			<a
				href="#"
				on:click={() =>
					$roundDownChapters === 'true'
						? roundDownChapters.set('false')
						: roundDownChapters.set('true')}
				>{$roundDownChapters === 'false' ? 'Round down' : 'Maintain'} chapters</a
			>
			<small style="opacity: 50%;"
				>50/50.6 would {@html $roundDownChapters === 'true' ? '<b>not</b>' : ''} be due</small
			>
		</li>
		<li>
			<a
				href="#"
				on:click={() =>
					$closeAnimeByDefault === 'true'
						? closeAnimeByDefault.set('false')
						: closeAnimeByDefault.set('true')}
				>{$closeAnimeByDefault === 'true' ? 'Expand' : 'Close'} anime panel by default</a
			>
		</li>
		<li>
			<a
				href="#"
				on:click={() =>
					$closeMangaByDefault === 'true'
						? closeMangaByDefault.set('false')
						: closeMangaByDefault.set('true')}
				>{$closeMangaByDefault === 'true' ? 'Expand' : 'Close'} manga panel by default</a
			>
		</li>
		<li>
			<a
				href="#"
				on:click={() =>
					$sortByDifference === 'true'
						? sortByDifference.set('false')
						: sortByDifference.set('true')}
				>Sort anime by {@html $sortByDifference === 'true'
					? 'difference between last watched and next episode'
					: 'days left until next episode'}</a
			>
		</li>
		<li>
			<a href="#" on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>
		</li>
		<li><a href="#" on:click={pruneAll}>Re-cache <b>ALL</b> manga</a></li>
		<li>
			Re-cache <b>ALL</b> media keys every <input type="number" bind:value={$cacheMinutes} /> minutes
		</li>
		<li>
			Re-cache <b>ALL</b> manga chapter counts every
			<input type="number" bind:value={$cacheMangaMinutes} /> minutes
			<small style="opacity: 50%;"
				>Values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting"
					>rate-limiting depending on how much releasing manga are on your lists</a
				></small
			>
		</li>
		<li>
			<a href="#" on:click={resetSettings}>Reset <b>ALL</b> settings</a>
		</li>
		<li>
			<a href="#" on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
			<small style="opacity: 50%;">Doesn't break anything, but resets all settings and caches</small
			>
		</li>
	</ul>
{/if}
