<script lang="ts">
import type { TopMedia } from "$lib/Data/AniList/wrapped";
import proxy from "$lib/Utility/proxy";

export let topMedia: TopMedia;
export let updateWidth: () => void;
export let highestRatedGenreTagPercentage: boolean;
export let genreTagTitle: string;
</script>

<div class="categories-grid" style="padding-top: 0;">
  {#if topMedia.topGenreMedia && topMedia.genres.length > 0}
    <div class="category-grid pure-category category">
      <div class="grid-item image-grid">
        <a
          href={`https://anilist.co/${topMedia.topGenreMedia.type.toLowerCase()}/${
            topMedia.topGenreMedia.id
          }`}
          target="_blank"
        >
          <img
            src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)}
            alt="Highest Rated Genre Cover"
            class="cover-image"
            onload={updateWidth}
          />
        </a>
        <div>
          <b>{genreTagTitle} Genres</b>
          <ol>
            {#each topMedia.genres as genre}
              <li>
                <a href={`https://anilist.co/search/anime?genres=${genre.genre}`} target="_blank">
                  {genre.genre}{highestRatedGenreTagPercentage ? `: ${genre.averageScore}%` : ''}
                </a>
              </li>
            {/each}
          </ol>
        </div>
      </div>
    </div>
  {/if}
  {#if topMedia.topTagMedia && topMedia.tags.length > 0}
    <div class="category-grid pure-category category">
      <div class="grid-item image-grid">
        <a
          href={`https://anilist.co/${topMedia.topTagMedia.type.toLowerCase()}/${
            topMedia.topTagMedia.id
          }`}
          target="_blank"
        >
          <img
            src={proxy(topMedia.topTagMedia.coverImage.extraLarge)}
            alt="Highest Rated Tag Cover"
            class="cover-image"
            onload={updateWidth}
          />
        </a>
        <div>
          <b>{genreTagTitle} Tags</b>
          <ol>
            {#each topMedia.tags as tag}
              <li>
                <a href={`https://anilist.co/search/anime?genres=${tag.tag}`} target="_blank">
                  {tag.tag}{highestRatedGenreTagPercentage ? `: ${tag.averageScore}%` : ''}
                </a>
              </li>
            {/each}
          </ol>
        </div>
      </div>
    </div>
  {/if}
</div>
