<script lang="ts">
  import { albumLink, artistLink, dateToYear, linkUrl } from "$lib/util/functions";
  import type { Album, Markings } from "$lib/util/types";

  import MarkedStr from "$lib/components/ui/MarkedStr.svelte";
  import LinkText from "$lib/components/ui/LinkText.svelte";
  import TileItem from "./TileItem.svelte";

  export let item: Album;
  export let withArtist = false;
  export let markings: Markings | undefined = undefined;

  function playAlbum() {
    alert("playing " + item.name);
  }
</script>

<TileItem
  title={item.name}
  imageUrl={item.imageUrl}
  href={linkUrl(albumLink(item))}
  on:play={playAlbum}
>
  <p class="font-semibold ellipsis">
    <MarkedStr text={item.name} marked={markings?.title} />
  </p>
  <p class="text-sm text-base-content text-opacity-50 line-clamp-2 badges">
    {#if item.releaseDate}
      <span>{dateToYear(item.releaseDate).toString()}</span>
    {/if}
    <span>{item.albumType}</span>
    {#if withArtist}
      <span>
        {#each item.artists as artist, i}
          {#if i !== 0}
            ,
          {/if}
          <LinkText
            item={artistLink(artist)}
            marked={markings?.artists[i]}
            tabindex={-1}
          />
        {/each}
      </span>
    {/if}
  </p>
</TileItem>
