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

	import { chapterDatabase } from '$lib/Media/chapters';
	import manga from '../../stores/manga';
	import anime from '../../stores/anime';
	import settings from '../../stores/settings';
	import SettingCheckboxToggle from '$lib/Settings/SettingCheckboxToggle.svelte';
	import SettingHint from '$lib/Settings/SettingHint.svelte';
	import Verbiage from '$lib/Settings/Verbiage.svelte';
	import { pruneAllManga } from '$lib/Media/manga';

	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);
	};
</script>

<p>
	Have feedback or suggestions? Send a private message to
	<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList!
</p>

{#if data.user === undefined}
	Please log in to modify settings.
{:else}
	<details open>
		<summary>RSS Feeds</summary>

		<a
			href={'#'}
			on:click={() =>
				navigator.clipboard.writeText(
					`https://due.moe/feeds/activity-notifications?token=${data.user.accessToken}`
				)}
		>
			Click to copy AniList notifications RSS feed URL and token
		</a>
		<SettingHint lineBreak>Do not share this link with <b>anyone</b>!</SettingHint>
	</details>

	<p />

	<details open>
		<summary>Display</summary>

		<SettingCheckboxToggle setting="forceLightTheme" text="Force light theme" />
		<SettingCheckboxToggle setting="linkToLiveChart" text="Link anime to LiveChart.me" />
		<SettingCheckboxToggle
			setting="displayPausedMedia"
			text="Show paused media"
			lineBreak={false}
		/>
		<SettingCheckboxToggle setting="displayPlannedAnime" text="Show planned anime" />
		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
		<SettingCheckboxToggle setting="displaySocialButton" text="Show social button" />
		<SettingCheckboxToggle setting="displayUnresolved" text="Display unresolved media" />
		<SettingCheckboxToggle
			setting="displayNativeTitles"
			text="Display titles in native language"
			lineBreak={!$settings.displayNativeTitles}
		/>
		{#if $settings.displayNativeTitles}
			<SettingCheckboxToggle setting="displayFurigana" text="Display furigana for titles" />
		{/if}

		<SettingCheckboxToggle setting="hoverNavigation" text="Display navigation as hover bar">
			<SettingHint lineBreak>
				Minimises and moves navigation to the top-left corner of the screen, visible only on hover.
				Intended for use on desktop devices.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle setting="displayNotStarted" text="Show media with zero progress">
			<SettingHint lineBreak>
				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
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle setting="closeAnimeByDefault" text="Close anime panel by default" />
		<SettingCheckboxToggle setting="closeMangaByDefault" text="Close manga panel by default" />
		<SettingCheckboxToggle
			setting="sortByDifference"
			text="Sort anime by difference between last watched and next episode"
		>
			<SettingHint lineBreak>
				By default, anime will be sorted by the number of days left until the next episode airs.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle
			setting="displayMai"
			text={`Display <a href="https://anilist.co/character/127222/Mai-Sakurajima">Mai</a>`}
		>
			<SettingHint lineBreak>Let her remind you. It's for your own benefit.</SettingHint>
		</SettingCheckboxToggle>
	</details>

	<p />

	<details open>
		<summary>Calculation</summary>

		<SettingCheckboxToggle setting="roundDownChapters" text="Round down chapters">
			<SettingHint lineBreak>
				Round down to the nearest whole number. (e.g., 50/50.6 would <b>not</b> be due)
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle
			setting="disableOutOfDateVolumeWarning"
			text="Disable out-of-date volume warning"
		>
			<SettingHint lineBreak>
				Keeping this enabled displays a warning message when there is a mismatch between chapter
				progress and the number of volumes you have completed for a given title. (e.g. you are on
				Vol. 5 Ch. 50, but only have 3 volumes tracked when you should have 4)

				<br />

				Disabling this option speeds up refresh times for manga lists.
			</SettingHint>
		</SettingCheckboxToggle>

		<br />

		<SettingCheckboxToggle setting="disableGuessing" text="Disable informed chapter estimation">
			<SettingHint lineBreak>
				Enabling this setting will disable light novel chapter counts and may cause inaccuracy in
				unresolved manga and light novel chapter counts
			</SettingHint>
		</SettingCheckboxToggle>

		{#if !$settings.disableGuessing}
			<br />

			<select bind:value={$settings.guessMethod} on:change={pruneAllManga}>
				<option value="mode">Mode (fast, moderate to low accuracy)</option>
				<option value="median">Median (moderate speed, high accuracy, recommended)</option>
				<option value="iqr_median">Interquartile Range with Median (slower, high accuracy)</option>
				<option value="iqr_mode">Interquartile Range with Mode (slower, high accuracy)</option>
			</select>

			<SettingHint lineBreak>
				No chapter count estimation method will be 100% accurate. Since estimated media requires
				scores derived from user submitted progress, high (or low) false-reports skew the data.
			</SettingHint>
		{/if}
	</details>

	<p />

	<details open>
		<summary>Cache</summary>

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

		<br />

		<a href={'#'} on:click={pruneAllManga}>Re-cache <b>ALL</b> manga</a>
		<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>

		<p />

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

		<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
		<SettingHint lineBreak>
			Low values may cause <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">
				rate-limiting
			</a> depending on the amount of releasing manga are on your lists
		</SettingHint>
	</details>

	<p />

	<details open>
		<summary>Reset Settings</summary>

		<a href={'#'} on:click={settings.reset}>Reset <b>ALL</b> settings</a>
		<SettingHint lineBreak>
			Resets all settings present on this page to their default values
		</SettingHint>

		<p />

		<a href={'#'} on:click={() => localStorage.clear()}>Clear <code>localStorage</code> </a>
		<SettingHint lineBreak>
			Doesn't break anything, but resets all settings and clears all key caches. Recommended after
			updates
		</SettingHint>
	</details>

	<p />

	<Verbiage />
{/if}
