<template>
	<div class="flex flex-col gap-6">
		<div class="font-fat text-2xl relative">
			{{ playerState.name }}
			<template v-if="isYou">(You)</template>
			<span
				class="text-3xl absolute -top-0.5 -left-11 transition"
				:class="game.state.winnerIds?.includes(playerState.id) ? '' : 'opacity-0'"
			>
				<CrownIcon/>
			</span>
			<span
				class="text-2xl absolute top-0.5 -left-10 transition"
				:class="game.state.phase !== 'end' && game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
			>
				<DotsThreeOutlineIcon/>
			</span>
		</div>
		<div class="flex items-center gap-5 w-full flex-wrap">
			<NumberCard
				v-for="(card, index) in playerState.numberCards"
				:key="[index, card.number].join('-')"
				:number="card.number"
				:is-covert="card.isCovert"
				:is-own="isYou"
			/>
		</div>
		<div v-if="isYou" class="py-4 border border-dark-200 rounded-xl flex gap-5 flex-wrap w-full">
			<div
				v-if="playerState.specialCards.length === 0"
				class="font-fat opacity-40 text-2xl h-32 flex px-4 py-5"
			>
				<span>You don’t have any special cards.</span>
			</div>
			<SpecialCard
				v-for="id in playerState.specialCards"
				:key="id"
				:id="id"
				is-usable
			/>
		</div>
		<div class="font-fat opacity-30 text-3xl">
			{{ getNumberCardsSum(playerState.numberCards) }}
			<template v-if="!isYou && game.state.phase !== 'end' && playerState.numberCards.some(c => c.isCovert)">+ ?</template>
			/ {{ game.state.targetSum }}
		</div>
	</div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import { useGame } from "../clientGame"
	import { computed } from "vue"
	import NumberCard from "./NumberCard.vue"
	import { useAuth } from "../auth"
	import { getNumberCardsSum } from "../../shared/game/state"
	import CrownIcon from "virtual:icons/ph/crown-simple-bold"
	import DotsThreeOutlineIcon from "virtual:icons/ph/dots-three-outline"
	import SpecialCard from "./SpecialCard.vue"

	const props = defineProps<{
		playerId: string
	}>()

	const game = useGame()
	const auth = useAuth()
	const playerState = computed(() => game.state.players.find(p => p.id === props.playerId)!)
	const isYou = computed(() => playerState.value.id === auth.requiredUser.id)
</script>