<script lang="ts">
  import {
    aniListLoggedIn,
    aniListWatchlist,
    GetAnimeSingleItem,
    loading,
  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
  import { push } from "svelte-spa-router";
  import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
  import { Rating } from "flowbite-svelte";
  import loader from "../helperFunctions/loader";
  import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";

  let isAniListLoggedIn: boolean;
  let aniListWatchListLoaded: AniListCurrentUserWatchList;

  aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
  aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
</script>

<div>
  {#if isAniListLoggedIn}
    <div
      class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center"
    >
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
        <button
          type="button"
          class="py-2 px-4 bg-gray-700 rounded-lg"
          on:click={async () => {
            loading.set(true);
            await CheckIfAniListLoggedInAndLoadWatchList();
            loading.set(false);
          }}
        >
          Refresh WatchList
        </button>
      </div>

      <div
        class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
      >
        {#each aniListWatchListLoaded.data.Page.mediaList as media}
          <div
            use:loader={loading}
            class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7"
          >
            <div class="flex flex-col items-center group">
              <button
                on:click={() => {
                  push(`#/anime/${media.media.id}`);
                  // loading.set(true)
                  // GetAniListSingleItem(media.media.id, true).then(() => {
                  //     loading.set(false)
                  //
                  // })
                }}
              >
                <img
                  class="rounded-lg w-[230px] h-[330px] object-cover"
                  src={media.media.coverImage.large}
                  alt={media.media.title.english === ""
                    ? media.media.title.romaji
                    : media.media.title.english}
                />
              </button>
              <Rating
                id="anime-rating"
                total={5}
                size={35}
                rating={media.score / 2.0}
              />
              <button
                class="mt-4 text-md font-semibold text-white-700"
                on:click={() => GetAnimeSingleItem(media.media.id, true)}
              >
                {media.media.title.english === ""
                  ? media.media.title.romaji
                  : media.media.title.english}
              </button>
              <p class="mt-1 text-lg font-medium text-white-900">
                {media.progress}
                / {media.media.nextAiringEpisode.episode !== 0
                  ? media.media.nextAiringEpisode.episode - 1
                  : media.media.episodes}
              </p>
              {#if media.media.episodes > 0}
                <p class="mt-1 text-lg font-medium text-white-900">
                  Total Episodes: {media.media.episodes}
                </p>
              {/if}
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}
</div>
