<template>
  <section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
    <Card :card="card!" :is-face-up @click="clickOnCard" :role="platineOpen ? 'img' : 'button'" showPlayButtonFaceUp />
    <Platine v-if="platineOpen && card" :card="card" autoplay />
    <CloseButton v-if="platineOpen" @click="platineOpen = false" />
  </section>
</template>

<script setup lang="ts">
import type { Card } from '~~/types/types'

const { data: card, pending, error } = await useFetch<Card>('/api/card/random')

const isFaceUp = ref(false)
const platineOpen = ref(false)

useHead({
  title: computed(() =>
    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
  )
})

onMounted(() => {
  setTimeout(() => {
    isFaceUp.value = true
  }, 700)
})

const clickOnCard = () => {
  platineOpen.value = !platineOpen.value
}
</script>

<style scoped lang="scss">
$open-speed: 0.4s;

.platine-card {
  @apply screen-centered h-screen;

  :deep(.card) {
    transition: width $open-speed, height $open-speed, transform 0.1s;
    position: absolute;

    .face-up,
    .pochette {
      transition: border-radius $open-speed, box-shadow $open-speed;

      &:active {
        .play-button {
          @apply scale-90;
        }
      }
    }
  }

  &--platine-open {
    .card {
      pointer-events: none;

      &:focus {
        @apply z-auto scale-100;
      }
    }

    .card,
    .platine {
      width: 100vmin;
      height: 100vmin;
    }

    &:deep(.card) {
      .face-up {
        border-radius: 999px;
        @apply shadow-xl;

        .pochette {
          border-radius: 999px;
        }

        .rank {
          opacity: 0;
        }
      }

      .play-button,
      .card-body,
      .face-down {
        display: none;
        opacity: 0;
      }
    }
  }
}
</style>