<script lang="ts">
import { onMount } from "svelte";
import type { AniListAuthorisation } from "$lib/Data/AniList/identity";
import AnimeList from "$lib/List/Anime/DueAnimeList.svelte";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import locale from "$stores/locale";
import stateBin, { hydrateStateBin } from "$stores/stateBin";
import ListTitle from "../ListTitle.svelte";

export let userIdentity: { id: number };
export let user: AniListAuthorisation;

onMount(async () => {
	await hydrateStateBin();
	$stateBin.dueAnimeListOpen ??= true;
});
</script>

<details bind:open={$stateBin.dueAnimeListOpen} class="list list-due">
  {#if userIdentity.id !== -2}
    <AnimeList {user} />
  {:else}
    <ListTitle title={$locale().lists.due.episodes} />

    <Skeleton card={false} count={5} height="0.9rem" list />
  {/if}
</details>
