<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';
	import SettingToggle from '$lib/Settings/SettingToggle.svelte';

	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>

	<SettingToggle setting={'forceLightTheme'} on={'Use preferred'} off={'Force light'}>
		theme
	</SettingToggle>
	<SettingToggle
		setting={'linkToAniList'}
		on={'Link anime to LiveChart.me'}
		off={'Link anime to AniList'}
	/>
	<SettingToggle setting={'showCompletedAnime'} on={'Hide'} off={'Show'}>
		completed anime
	</SettingToggle>
	<SettingToggle setting={'displayPausedMedia'} on={'Hide'} off={'Show'} sectionBreak={true}>
		paused media
	</SettingToggle>

	<SettingToggle setting={'displayUnresolved'} on={'Hide'} off={'Show'}>unresolved</SettingToggle>
	<small style="opacity: 50%;">Displays unresolved chapter counts as "?"</small>

	<p />

	<SettingToggle setting={'displayNotStarted'} on={'Hide'} off={'Show'}>
		media with zero progress
	</SettingToggle>
	<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 />

	<SettingToggle setting={'closeAnimeByDefault'} on={'Expand'} off={'Close'}>
		anime panel by default
	</SettingToggle>
	<SettingToggle setting={'closeMangaByDefault'} on={'Expand'} off={'Close'}>
		manga panel by default
	</SettingToggle>
	<SettingToggle setting={'sortByDifference'}>
		Sort anime by {@html !$settings.sortByDifference
			? 'difference between last watched and next episode'
			: 'days left until next episode'}
	</SettingToggle>

	<h2>Calculation</h2>

	<SettingToggle setting={'roundDownChapters'} on={'Maintain'} off={'Round down'}>
		chapters
	</SettingToggle>
	<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}
