<template>
  <article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
    class="card flip-card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
    <div class="flip-inner">
      <!-- Face-Up -->
      <main
        class="flip-front backdrop-blur-sm border-1 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
        <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
          <div class="suit text-7xl absolute"
            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
            <img :src="`/${props.track.card?.suit}.svg`" />
          </div>
          <div class="rank text-white font-bold absolute -mt-1">
            {{ props.track.card?.rank }}
          </div>
        </div>
        <!-- Cover -->
        <figure class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
          <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
        </figure>

        <!-- Body -->
        <div class="p-3 text-center bg-white rounded-b-xl">
          <div class="label" v-if="isOrder">
            {{ props.track.order }}
          </div>
          <h2 class="text-base text-neutral-800 font-bold truncate">
            {{ props.track.title }}
          </h2>
          <p class="text-sm text-neutral-500 truncate">
            <template v-if="isPlaylistTrack">
              {{ props.track.artist.name }}
            </template>
          </p>
        </div>
      </main>

      <!-- Face-Down -->
      <footer
        class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
        <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
          <img src="/favicon.svg" />
          <div class="label label--id" v-if="isOrder">
            {{ props.track.order }}
          </div>
        </div>
      </footer>
    </div>
  </article>

</template>

<script setup lang="ts">
import type { Track } from '~~/types/types'
import { usePlayerStore } from '~/store/player'

const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
  isFaceUp: false
})
const playerStore = usePlayerStore()
const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
const isOrder = computed(() => props.track.order && !isManifesto)
const isPlaylistTrack = computed(() => props.track.type === 'playlist')
const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
const coverUrl = props.track.coverId.startsWith('http')
  ? props.track.coverId
  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
</script>

<style lang="scss">
.label {
  @apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
  font-weight: bold;
  text-align: center;
}

/* Flip effect */
.flip-card {
  perspective: 1000px;

  .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;

    .face-down & {
      transform: rotateY(180deg);
    }

    .face-up & {
      transform: rotateY(0deg);
    }
  }

  .flip-front,
  .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    will-change: transform;
  }

  .flip-front {
    transform: rotateY(0deg);
  }

  .flip-back {
    transform: rotateY(180deg);
  }

  .♠,
  .♣,
  .♦,
  .♥ {
    @apply text-5xl size-14;
  }
}
</style>