<template>
  <div :class="['player__row', { 'player__row__idle': player.isIdle }]">
    <div class="player__status">
      <span v-if="isPhaseSelectQuote">{{ hasSelected ? '☑' : '☐' }}</span>
    </div>
    <div class="player__name">
      {{ player.name }}
    </div>
    <div v-if="!hideScore" class="player__score">
      {{ player.score || 0 }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Player } from '@/stores/PlayersStore';
import { useGameinfoStore } from "@/stores/GameinfoStore"

defineProps<{
  player: Player,
  hideScore?: boolean,
}>()

const game = useGameinfoStore()
const isPhaseSelectQuote = computed(() => game.state === 'play' && game.phase === 'select-quote')
const hasSelected = computed(() => false) // return this.$store.state.round.selections[this.player.id]
</script>

<style lang="scss">
@import '~/assets/css/components';

.player {
  &__row {
    display: flex;
    background-color: $box-primary-background-color;
    color: $box-primary-text-color;
    font-family: $font-secondary;
    font-size: 18px;

    &__idle {
      background-color: $box-primary-disabled-background-color;
      color: $box-primary-disabled-text-color;
    }
  }

  &__name {
    display: inline;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__status {
    width: 20px;
  }

  &__score {
    width: 32px;
    margin-left: 16px;
    text-align: right;
  }
}
</style>
