<template>
  <section class="playing-card" :class="{ 'platine-open': platineOpen }">
    <Card :card="props.card!" :is-face-up="props.isFaceUp" @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 props = defineProps<{ card: Card, isFaceUp: boolean }>()

const platineOpen = ref(false)

const clickOnCard = () => {
  setTimeout(() => {
    platineOpen.value = !platineOpen.value
  }, 600);
}
</script>

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

.playing-card {
  @apply size-card;
  position: relative;

  .card,
  .platine {
    height: 100%;
    width: 100%;
    transition: width $open-speed, height $open-speed, min-width $open-speed,
      min-height $open-speed, transform 0.1s;
  }

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

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

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

  &.platine-open {
    $open-size: 20rem;
    width: $open-size;
    height: $open-size;
    min-height: $open-size;
    min-width: $open-size;

    .card {
      pointer-events: none;

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

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

        .cover {
          border-radius: 100%;
        }

        .rank,
        .play-button {
          opacity: 0;
        }
      }

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