<script lang="ts">
  import { onDestroy, onMount } from 'svelte';
  import userIdentity from '$stores/identity.js';
  import settings from '$stores/settings';
  import WatchingAnimeList from '$lib/List/Anime/CompletedAnimeList.svelte';
  import ListTitle from '$lib/List/ListTitle.svelte';
  import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
  import HeadTitle from '$lib/Home/HeadTitle.svelte';
  import LastActivity from '$lib/Home/LastActivity.svelte';
  import { createHeightObserver } from '$lib/Utility/html.js';
  import Skeleton from '$lib/Loading/Skeleton.svelte';
  import locale from '$stores/locale.js';
  import Landing from '$lib/Landing.svelte';
  import stateBin from '$stores/stateBin.js';

  export let data;

  let heightObserver: NodeJS.Timeout;

  onMount(() => {
    heightObserver = setInterval(() => createHeightObserver(), 0);
    $stateBin.completedAnimeListOpen ??= true;
    $stateBin.completedMangaListOpen ??= true;
  });

  onDestroy(() => clearInterval(heightObserver));
</script>

<HeadTitle route="Completed" path="/completed" />

<LastActivity user={data.user} />

{#if data.user === undefined}
  <div class="card">Please log in to view completed media.</div>

  <p />

  <Landing />
{:else}
  <div class="list-container">
    {#if !$settings.displayFiltersIncludeCompleted || !$settings.disableAnime}
      <details bind:open={$stateBin.completedAnimeListOpen} class="list">
        {#if $userIdentity.id !== -2}
          <WatchingAnimeList user={data.user} />
        {:else}
          <ListTitle title={$locale().lists.completed.anime} />

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

    {#if !$settings.displayFiltersIncludeCompleted || !$settings.disableManga}
      <details bind:open={$stateBin.completedMangaListOpen} class="list">
        {#if $userIdentity.id !== -2}
          <MangaListTemplate
            user={data.user}
            displayUnresolved={$settings.displayUnresolved}
            due={false}
          />
        {:else}
          <ListTitle title={$locale().lists.completed.mangaAndLightNovels} />

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

<style>
  .list-container {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 1em;
  }

  .list {
    overflow-y: auto;
    min-width: 300px;
    flex: 1 1 300px;
  }
</style>
