<script lang="ts">
import Spacer from '$lib/Layout/Spacer.svelte';
import { dumpUser } from '$lib/Data/AniList/user';
import RateLimited from '$lib/Error/RateLimited.svelte';
import Skeleton from '$lib/Loading/Skeleton.svelte';
import InputTemplate from './InputTemplate.svelte';
import LZString from 'lz-string';

let submission = '';

// Credit: @hoh
const decodeJSON = (about: string): JSON | null => {
  const match = (about || '').match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/);

  if (match)
    try {
      return JSON.parse(atob(match[1]));
    } catch {
      try {
        return JSON.parse(LZString.decompressFromBase64(match[1]));
      } catch {
        return null;
      }
    }

  return null;
};
</script>

<InputTemplate field="Username" bind:submission event="Dump User" submitText="Dump">
  {#await dumpUser(submission)}
    <Skeleton card={false} count={1} height="500px" />
  {:then dump}
    {@const decoded = decodeJSON(dump.about)}

    <pre>{JSON.stringify(dump, null, 2)}</pre>

    {#if decoded && (dump.about || '').includes('[](json')}
      <Spacer />

      <pre>{JSON.stringify(decoded, null, 2).replaceAll(/\\n/g, '\n')}</pre>
    {/if}
  {:catch}
    <RateLimited type="User" list={false} />
  {/await}
</InputTemplate>

<style>
  pre {
    margin: 0;
  }
</style>
