<script lang="ts">
import Spacer from '$lib/Layout/Spacer.svelte';
import { followers } from '$lib/Data/AniList/following';
import RateLimited from '$lib/Error/RateLimited.svelte';
import Skeleton from '$lib/Loading/Skeleton.svelte';
import TextSwap from '$lib/Layout/TextTransition.svelte';
import InputTemplate from './InputTemplate.svelte';

let submission = '';
let randomSeed = 0;
</script>

<InputTemplate
  field="Username"
  bind:submission
  event="Random Follower"
  submitText="Generate"
  onSubmit={() => (randomSeed = Math.random())}
>
  {#await followers(submission)}
    <Skeleton card={false} count={1} height="0.9rem" list />
  {:then users}
    {@const user = users[Math.floor(randomSeed * users.length)]}

    <Spacer />

    <a href={`https://anilist.co/user/${user.id}`} target="_blank">
      <TextSwap text={user.name} />
    </a>
  {:catch}
    <RateLimited type="Followers" list={false} />
  {/await}
</InputTemplate>
