<script lang="ts">
  import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
  import type { Media } from '$lib/Data/AniList/media';
  import { outboundLink } from '$lib/Media/links';
  import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
  import settings from '$stores/settings';

  interface Props {
    media: Media[];
    type: 'anime' | 'manga';
    upcoming?: boolean;
    notYetReleased?: boolean;
    lastUpdatedMedia: number;
    information?: import('svelte').Snippet<[any]>;
  }

  let {
    media,
    type,
    upcoming = false,
    notYetReleased = false,
    lastUpdatedMedia,
    information
  }: Props = $props();
</script>

<ul>
  {#each media as title}
    {@const progress = (title.mediaListEntry || { progress: 0 }).progress}

    {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress !== title.episodes}
      <li class="entry">
        <span class="content">
          <LinkedTooltip
            id={`${type}-${title.id}`}
            content={`<img src="${
              $settings.displayDataSaver ? title.coverImage.medium : title.coverImage.extraLarge
            }" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
            pin={`${type}-${title.id}`}
            pinPosition={type === 'anime' ? 'right' : 'left'}
            disable={!$settings.displayHoverCover}
          >
            <a
              href={$settings.displayCopyMediaTitleNotLink
                ? '#'
                : outboundLink(title, type, $settings.displayOutboundLinksTo)}
              onclick={(e) => {
                if ($settings.displayCopyMediaTitleNotLink) {
                  e.preventDefault();

                  navigator.clipboard.writeText(title.title.romaji);
                }
              }}
              target="_blank"
            >
              <span
                style={lastUpdatedMedia === title.id && title.chapters !== progress
                  ? 'color: lightcoral'
                  : ''}
              >
                <MediaTitleDisplay title={title.title} />
              </span>
            </a>
          </LinkedTooltip>
          {#if $settings.displaySocialButton}
            [<a href={`https://anilist.co/${type}/${title.id}/social`} target="_blank">S</a>]
          {/if}

          {@render information?.({ progress, title, })}
        </span>
      </li>
    {/if}
  {/each}
</ul>
