<script lang="ts">
	/* eslint svelte/no-at-html-tags: "off" */

	import { chapterDatabase } from '$lib/chapterDatabase';
	import manga from '../../stores/manga';
	import anime from '../../stores/anime';
	import settings from '../../stores/settings';

	export let data;

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

		manga.set('');
		anime.set('');
		await chapterDatabase.chapters.bulkDelete(ids);
	};
	const pruneAll = async () => {
		const all = await chapterDatabase.chapters.toArray();
		const ids = all.map((m) => m.id);

		manga.set('');
		await chapterDatabase.chapters.bulkDelete(ids);
	};
</script>

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

<p />

{#if data.user === undefined}
	Please log in to modify settings.
{:else}
	<h2>Display</h2>

	<a
		href={'#'}
		on:click={() =>
			$settings.forceLightTheme
				? settings.setKey('forceLightTheme', false)
				: settings.setKey('forceLightTheme', true)}
		>{$settings.forceLightTheme ? 'Use preferred theme' : 'Force light theme'}</a
	>
	<br />

	<a
		href={'#'}
		on:click={() =>
			$settings.linkToAniList
				? settings.setKey('linkToAniList', false)
				: settings.setKey('linkToAniList', true)}
		>{$settings.linkToAniList ? 'Link anime to LiveChart.me' : 'Link anime to AniList'}</a
	>
	<br />

	<a
		href={'#'}
		on:click={() =>
			$settings.showCompletedAnime
				? settings.setKey('showCompletedAnime', false)
				: settings.setKey('showCompletedAnime', true)}
		>{$settings.showCompletedAnime ? 'Hide' : 'Show'} completed anime</a
	>
	<br />

	<a
		href={'#'}
		on:click={() =>
			$settings.displayPausedMedia
				? settings.setKey('displayPausedMedia', false)
				: settings.setKey('displayPausedMedia', true)}
		>{$settings.displayPausedMedia ? 'Hide' : 'Show'} paused media</a
	>
	<br />

	<p />

	<a
		href={'#'}
		on:click={() =>
			$settings.displayUnresolved
				? settings.setKey('displayUnresolved', false)
				: settings.setKey('displayUnresolved', true)}
		>{$settings.displayUnresolved ? 'Hide' : 'Show'} unresolved</a
	>
	<br />
	<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>

	<p />

	<a
		href={'#'}
		on:click={() =>
			$settings.displayNotStarted
				? settings.setKey('displayNotStarted', false)
				: settings.setKey('displayNotStarted', true)}
		>{$settings.displayNotStarted ? 'Hide' : 'Show'} media with zero progress</a
	>
	<br />
	<small style="opacity: 50%;"
		>May cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank"
			>rate-limiting</a
		> depending on how much releasing manga are on your lists</small
	>

	<p />

	<a
		href={'#'}
		on:click={() =>
			$settings.closeAnimeByDefault
				? settings.setKey('closeAnimeByDefault', false)
				: settings.setKey('closeAnimeByDefault', true)}
		>{$settings.closeAnimeByDefault ? 'Expand' : 'Close'} anime panel by default</a
	>

	<br />

	<a
		href={'#'}
		on:click={() =>
			$settings.closeMangaByDefault
				? settings.setKey('closeMangaByDefault', false)
				: settings.setKey('closeMangaByDefault', true)}
		>{$settings.closeMangaByDefault ? 'Expand' : 'Close'} manga panel by default</a
	>

	<br />

	<a
		href={'#'}
		on:click={() =>
			$settings.sortByDifference
				? settings.setKey('sortByDifference', false)
				: settings.setKey('sortByDifference', true)}
		>Sort anime by {@html !$settings.sortByDifference
			? 'difference between last watched and next episode'
			: 'days left until next episode'}</a
	>

	<h2>Calculation</h2>

	<a
		href={'#'}
		on:click={() =>
			$settings.roundDownChapters
				? settings.setKey('roundDownChapters', false)
				: settings.setKey('roundDownChapters', true)}
		>{!$settings.roundDownChapters ? 'Round down' : 'Maintain'} chapters</a
	>
	<br />
	<small style="opacity: 50%;"
		>50/50.6 would {@html $settings.roundDownChapters ? '<b>not</b>' : ''} be due</small
	>

	<h2>Cache</h2>

	<a href={'#'} on:click={pruneUnresolved}>Re-cache <b>ALL</b> unresolved manga</a>

	<br />

	<a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a>

	<br />

	Re-cache <b>ALL</b> media keys every
	<input type="number" bind:value={$settings.cacheMinutes} min="1" max="60" placeholder="30" />
	minutes

	<p />

	<span>Re-cache <b>ALL</b> manga chapter counts every</span>
	<input
		type="number"
		bind:value={$settings.cacheMangaMinutes}
		min="1"
		max="1440"
		placeholder="60"
	/>
	minutes
	<br />
	<small style="opacity: 50%;"
		>Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank"
			>rate-limiting</a
		> depending on how much releasing manga are on your lists</small
	>

	<h2>Reset</h2>

	<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>

	<p />

	<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
	<br />
	<small style="opacity: 50%;"
		>Doesn't break anything, but resets all settings and key caches. Recommended after updates</small
	>
{/if}
