<script setup lang="ts">
import {useWebSocket} from "@/composables/useWebsocket.ts";
import {useIngame} from "@/composables/useIngame.ts";
import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo} from "@/types/GameTypes.ts";
import {useQuasar} from "quasar";
import { ref } from 'vue';
import { computed } from 'vue'

const wb = useWebSocket()
const wi = useIngame()
const tieInf = computed(() => wi.data as TieInfo)
const tieBlankCard = [
  "/images/cards/AS.png"
]
const $q = useQuasar();
function getCardImagePath(cardPath: string) {
  if (!cardPath) return ''
  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
  return `/${cardPath}`
}
function selectTie(tieIndex: number) {
  wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
    $q.notify({
      message: "You've successfully picked your tieCard",
      color: "positive",
      position: "top"
    })

  ).catch((error) => {
    $q.notify({
      message: error.message,
      color: "negative",
      position: "top"
    })
  })
}
const model = ref(1)
const options = computed(() => {
  const list = []
  const max = tieInf.value.highestAmount?.valueOf() || 0
  for (let i = 1; i <= max; i++) {
    list.push(i)
  }
  return list
})

</script>

<template>
  <q-card v-if="tieInf.self?.name === tieInf.currentPlayer?.name" class="player-profile-card" flat bordered>
    <q-card-section class="bg-white text-dark text-center q-py-lg">
      <div class="text-h3 text-weight-bolder">
        {{ tieInf.self?.name || "Loading Player..."}}
      </div>
    </q-card-section>
    <q-card-section class="bg-dark text-dark text-center q-py-lg">
      <div class="q-pa-md" style="max-width: 500px">
        <div class="q-gutter-md">
          <q-select
            v-model="model"
            :options="options"
            label="Select Amount"
            filled
            bg-color="white"
            label-color="primary"
            color="primary"
            popup-content-class="bg-white text-black"
          />
          <q-btn
            color="positive"
            icon="sports_martial_arts"
            @click="selectTie(model)"
            class="full-width"
          />
        </div>
      </div>
    </q-card-section>

  </q-card>
  <q-card
    v-else
    class="player-profile-card text-center"
    flat
    bordered
    style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
  >
    <q-card-section class="q-pa-lg">
      <q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
      <div class="text-h5 text-grey-8">
        Waiting for {{ tieInf.currentPlayer?.name || 'the other player' }} to select card for the tie...
      </div>
    </q-card-section>
  </q-card>
</template>

<style scoped>

</style>
