<script setup lang="ts">
import StylessButton from "@/components/button/StylessButton.vue";
import type {ICard} from "@/types/card.type";
import {computed} from "vue";

const props = withDefaults(defineProps<{
  card?: ICard,
  clickable?: boolean,
  hoverable?: boolean
}>(), {
  clickable: p => p.card !== undefined
});

const emits = defineEmits<{
  (event: 'click', card?: ICard): void
}>();

const imageUrl = computed(() => {
  if (!props.card) {
    return new URL("@/assets/cards/back.png", import.meta.url).href;
  }

  // I hate this with a passion, but vite doesn't want to resolve dynamic paths >:(
  switch (props.card.type) {
    case "SPADES":
      switch (props.card.value) {
        case "TWO":
          return new URL("@/assets/cards/spades_two.png", import.meta.url).href;
        case "THREE":
          return new URL("@/assets/cards/spades_three.png", import.meta.url).href;
        case "FOUR":
          return new URL("@/assets/cards/spades_four.png", import.meta.url).href;
        case "FIVE":
          return new URL("@/assets/cards/spades_five.png", import.meta.url).href;
        case "SIX":
          return new URL("@/assets/cards/spades_six.png", import.meta.url).href;
        case "SEVEN":
          return new URL("@/assets/cards/spades_seven.png", import.meta.url).href;
        case "EIGHT":
          return new URL("@/assets/cards/spades_eight.png", import.meta.url).href;
        case "NINE":
          return new URL("@/assets/cards/spades_nine.png", import.meta.url).href;
        case "TEN":
          return new URL("@/assets/cards/spades_ten.png", import.meta.url).href;
        case "JACK":
          return new URL("@/assets/cards/spades_jack.png", import.meta.url).href;
        case "QUEEN":
          return new URL("@/assets/cards/spades_queen.png", import.meta.url).href;
        case "KING":
          return new URL("@/assets/cards/spades_king.png", import.meta.url).href;
        case "ACE":
          return new URL("@/assets/cards/spades_ace.png", import.meta.url).href;
        default:
          return new URL("@/assets/cards/back.png", import.meta.url).href;
      }
    case "HEARTS":
      switch (props.card.value) {
        case "TWO":
          return new URL("@/assets/cards/hearts_two.png", import.meta.url).href;
        case "THREE":
          return new URL("@/assets/cards/hearts_three.png", import.meta.url).href;
        case "FOUR":
          return new URL("@/assets/cards/hearts_four.png", import.meta.url).href;
        case "FIVE":
          return new URL("@/assets/cards/hearts_five.png", import.meta.url).href;
        case "SIX":
          return new URL("@/assets/cards/hearts_six.png", import.meta.url).href;
        case "SEVEN":
          return new URL("@/assets/cards/hearts_seven.png", import.meta.url).href;
        case "EIGHT":
          return new URL("@/assets/cards/hearts_eight.png", import.meta.url).href;
        case "NINE":
          return new URL("@/assets/cards/hearts_nine.png", import.meta.url).href;
        case "TEN":
          return new URL("@/assets/cards/hearts_ten.png", import.meta.url).href;
        case "JACK":
          return new URL("@/assets/cards/hearts_jack.png", import.meta.url).href;
        case "QUEEN":
          return new URL("@/assets/cards/hearts_queen.png", import.meta.url).href;
        case "KING":
          return new URL("@/assets/cards/hearts_king.png", import.meta.url).href;
        case "ACE":
          return new URL("@/assets/cards/hearts_ace.png", import.meta.url).href;
        default:
          return new URL("@/assets/cards/back.png", import.meta.url).href;
      }
    case "DIAMONDS":
      switch (props.card.value) {
        case "TWO":
          return new URL("@/assets/cards/diamonds_two.png", import.meta.url).href;
        case "THREE":
          return new URL("@/assets/cards/diamonds_three.png", import.meta.url).href;
        case "FOUR":
          return new URL("@/assets/cards/diamonds_four.png", import.meta.url).href;
        case "FIVE":
          return new URL("@/assets/cards/diamonds_five.png", import.meta.url).href;
        case "SIX":
          return new URL("@/assets/cards/diamonds_six.png", import.meta.url).href;
        case "SEVEN":
          return new URL("@/assets/cards/diamonds_seven.png", import.meta.url).href;
        case "EIGHT":
          return new URL("@/assets/cards/diamonds_eight.png", import.meta.url).href;
        case "NINE":
          return new URL("@/assets/cards/diamonds_nine.png", import.meta.url).href;
        case "TEN":
          return new URL("@/assets/cards/diamonds_ten.png", import.meta.url).href;
        case "JACK":
          return new URL("@/assets/cards/diamonds_jack.png", import.meta.url).href;
        case "QUEEN":
          return new URL("@/assets/cards/diamonds_queen.png", import.meta.url).href;
        case "KING":
          return new URL("@/assets/cards/diamonds_king.png", import.meta.url).href;
        case "ACE":
          return new URL("@/assets/cards/diamonds_ace.png", import.meta.url).href;
        default:
          return new URL("@/assets/cards/back.png", import.meta.url).href;
      }
    case "CLUBS":
      switch (props.card.value) {
        case "TWO":
          return new URL("@/assets/cards/clubs_two.png", import.meta.url).href;
        case "THREE":
          return new URL("@/assets/cards/clubs_three.png", import.meta.url).href;
        case "FOUR":
          return new URL("@/assets/cards/clubs_four.png", import.meta.url).href;
        case "FIVE":
          return new URL("@/assets/cards/clubs_five.png", import.meta.url).href;
        case "SIX":
          return new URL("@/assets/cards/clubs_six.png", import.meta.url).href;
        case "SEVEN":
          return new URL("@/assets/cards/clubs_seven.png", import.meta.url).href;
        case "EIGHT":
          return new URL("@/assets/cards/clubs_eight.png", import.meta.url).href;
        case "NINE":
          return new URL("@/assets/cards/clubs_nine.png", import.meta.url).href;
        case "TEN":
          return new URL("@/assets/cards/clubs_ten.png", import.meta.url).href;
        case "JACK":
          return new URL("@/assets/cards/clubs_jack.png", import.meta.url).href;
        case "QUEEN":
          return new URL("@/assets/cards/clubs_queen.png", import.meta.url).href;
        case "KING":
          return new URL("@/assets/cards/clubs_king.png", import.meta.url).href;
        case "ACE":
          return new URL("@/assets/cards/clubs_ace.png", import.meta.url).href;
        default:
          return new URL("@/assets/cards/back.png", import.meta.url).href;
      }
      case "JOKER":
        switch (props.card.value) {
          case "RED":
            return new URL("@/assets/cards/joker_red.png", import.meta.url).href;
          case "BLACK":
            return new URL("@/assets/cards/joker_black.png", import.meta.url).href;
          default:
            return new URL("@/assets/cards/back.png", import.meta.url).href;
        }
    default:
      return new URL("@/assets/cards/back.png", import.meta.url).href;
  }
});

const onClick = () => {
  emits('click', props.card);
}
</script>

<template>
  <StylessButton class="card" :class="hoverable ? 'card__hover' : ''" :disabled="!clickable" @click="onClick">
    <img class="card__texture" :src="imageUrl" :alt="card?.type + ' ' + card?.value"/>
  </StylessButton>
</template>

<style scoped lang="scss">
.card {
  width: 100px;
  height: 150px;
  min-width: 100px;

  &__texture {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &__hover {
    img {
      transition: margin-top 250ms ease-in-out;

      &:hover {
        margin-top: -1rem;
      }
    }
  }
}
</style>