<script lang="ts">
  import Spacer from '$lib/Layout/Spacer.svelte';
  import settings from '$stores/settings';
  import { addNotification } from '$lib/Notification/store';
  import SettingHint from '../SettingHint.svelte';
  import { options } from '$lib/Notification/options';
  import locale from '$stores/locale';
  import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
  import localforage from 'localforage';
  import { browser } from '$app/environment';

  const clearCaches = async () => {
    if (!browser) return;

    await localforage.removeItem('anime');
    await localforage.removeItem('manga');
    addNotification(
      options({
        heading: 'Anime and manga list caches successfully cleared'
      })
    );
  };
</script>

<SettingCheckboxToggle setting="debugDummyLists" text={$locale().debug.dummyLists} />

<button onclick={clearCaches}>{$locale().debug.clearCaches}</button>

<Spacer />

<button
  onclick={() => {
    settings.reset();
    addNotification(
      options({
        heading: 'All settings successfully reset'
      })
    );
  }}
>
  {$locale().debug.resetAllSettings.title}
</button>
<SettingHint lineBreak>
  {$locale().debug.resetAllSettings.hint}
</SettingHint>

<Spacer />

<button
  onclick={async () => {
    await localforage.clear();
    addNotification(
      options({
        heading: 'local database successfully cleared'
      })
    );
  }}>{$locale().debug.clearLocalStorage.title} local database</button
>
<SettingHint lineBreak>
  {$locale().debug.clearLocalStorage.hint1}
  <br />
  {$locale().debug.clearLocalStorage.hint2}
</SettingHint>

<Spacer />

Custom CSS
<textarea bind:value={$settings.displayCustomCSS}></textarea>
