<script lang="ts">
  import type { Media } from '$lib/Data/AniList/media';
  import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
  import type { SubsPleaseEpisode } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';

  import { outboundLink } from '$lib/Media/links';
  import tooltip from '$lib/Tooltip/tooltip';
  import { abbreviate } from '$lib/Utility/string';
  import settings from '$stores/settings';

  export let media: Media | null;
  export let entry: SubsPleaseEpisode;
  export let cover = true;
  export let showTooltip = true;

  const abbreviateTo = 40;

  const titleSelect = (media: Media | null) =>
    media ? media.title.english || media.title.romaji || media.title.native : null;
</script>

<a
  href={media
    ? outboundLink(media, 'anime', $settings.displayOutboundLinksTo)
    : outboundLink(
        null,
        'anime',
        $settings.displayOutboundLinksTo,
        true,
        titleSelect(media) || entry.title
      )}
  target="_blank"
  title={`<img src="${
    $settings.displayDataSaver ? media?.coverImage.medium : media?.coverImage.extraLarge
  }" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
  use:tooltip
  data-tooltip-disable={media && cover ? false : true}
>
  {#if media}
    <MediaTitleDisplay
      title={media.title}
      abbreviate
      {abbreviateTo}
      tooltip={showTooltip
        ? media.title.english?.length > abbreviateTo ||
          media.title.romaji?.length > abbreviateTo ||
          media.title.native?.length > abbreviateTo
        : false}
    />
  {:else}
    <span title={entry.title} use:tooltip>
      {abbreviate(entry.title, abbreviateTo)}
    </span>
  {/if}
</a>
