<script lang="ts">
	import { followers } from '$lib/AniList/following';
	import RateLimited from '$lib/Error/RateLimited.svelte';
	import { clearAllParameters } from '$lib/Utility/parameters';
	import { onMount } from 'svelte';

	let input = '';
	let submit = '';
	let randomSeed = 0;

	onMount(clearAllParameters);
</script>

<p>
	<!-- svelte-ignore missing-declaration -->
	<input
		type="text"
		placeholder="Username"
		bind:value={input}
		on:keypress={(e) => {
			if (e.key === 'Enter') {
				submit = input;
				randomSeed = Math.random();

				// eslint-disable-next-line no-undef
				umami.track('Random Follower');
			}
		}}
	/>
	<button
		class="button-lined"
		on:click={() => (submit = input) && (randomSeed = Math.random())}
		title="Or click your Enter key"
		data-umami-event="Random Follower"
	>
		Generate
	</button>
</p>

{#if submit !== ''}
	{#await followers(submit)}
		Loading followers ... 50%
	{:then users}
		{@const user = users[Math.floor(randomSeed * users.length)]}

		<p />

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

	Enter a username to search for to continue.
{/if}
