<script setup lang="ts">
import { computed, ref } from 'vue'
import { formatMessage, messages } from '../lib/messages'
import type { TrackEvent } from '../lib/types'

const props = defineProps<{ event: TrackEvent }>()
const artworkFailed = ref(false)
const artists = computed(() => props.event.track.artists.join(', '))
const spotifyUrl = computed(() => props.event.track.external_url)
const artworkAlt = computed(() =>
  formatMessage('trackCardArtworkAlt', { album: props.event.track.album_name }),
)
</script>

<template>
  <article class="card">
    <div class="rank">{{ event.rank }}</div>
    <div class="art">
      <img
        v-if="event.track.album_art_url && !artworkFailed"
        :src="event.track.album_art_url"
        :alt="artworkAlt"
        @error="artworkFailed = true"
      />
    </div>
    <div class="track-meta">
      <div class="head">
        <span class="title">{{ event.track.title }}</span>
        <span class="artist">{{ artists }}</span>
      </div>
      <div class="album">{{ event.track.album_name }}</div>
      <div class="why">{{ event.justification }}</div>
    </div>
    <a v-if="spotifyUrl" class="link" :href="spotifyUrl" target="_blank" rel="noreferrer">
      {{ messages.trackCardOpenSpotify }}
      <span aria-hidden="true">&nearr;</span>
    </a>
  </article>
</template>

<style scoped>
.card {
  display: grid;
  grid-template-columns: 26px 52px 1fr auto;
  row-gap: var(--s-4);
  column-gap: var(--s-6);
  align-items: center;
  padding: 11px var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: var(--r-md);
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
  animation: card-in var(--dur-card) var(--ease) both;
}

.card:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-line-strong);
}

.rank {
  color: var(--c-text-faint);
  font-family: var(--f-mono);
  font-size: 12px;
  text-align: right;
}

.art {
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--c-art-a) 0 6px, var(--c-art-b) 6px 12px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}

.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-meta {
  min-width: 0;
}

.head {
  display: flex;
  flex-wrap: wrap;
  gap: 0 9px;
  align-items: baseline;
}

.title {
  font-size: var(--t-title);
  font-weight: 500;
}

.artist,
.album,
.why {
  color: var(--c-text-muted);
  font-size: 13px;
}

.album {
  margin-top: 1px;
  color: var(--c-text-faint);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
}

.why {
  margin-top: 3px;
  color: var(--c-text-dim);
  font-size: var(--t-small);
  text-wrap: pretty;
}

.link {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 6px var(--s-4);
  color: var(--c-text-muted);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.link:hover {
  color: var(--c-accent);
  text-decoration: none;
  border-color: var(--c-accent);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 560px) {
  .card {
    grid-template-columns: 26px 52px 1fr;
  }

  .link {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-height: var(--tap-min);
  }
}
</style>
