<template>
	<div class="flex <md:flex-col gap-15 justify-center">
		<div>
			<div class="font-bold text-lg pb-2 pl-2">Active special cards</div>
			<div class="p-4 border border-dark-200 rounded-xl flex flex-col gap-5 flex-wrap w-full">
				<div
					v-if="game.state.activeSpecialCards.length === 0"
					class="font-fat opacity-40 text-xl w-50 flex p-2"
				>
					<span>There are none.</span>
				</div>
				<SpecialCard
					v-for="card in game.state.activeSpecialCards"
					:key="card.id"
					:id="card.id"
					:owner-id="card.ownerId"
				/>
			</div>
		</div>
		<div class="flex flex-col gap-14 max-w-1200px flex-grow <md:pl-3 pb-5">
			<PlayerCards v-for="playerId in reorderedPlayerIds" :key="playerId" :player-id="playerId"/>
			<div class="flex gap-5 justify-end items-center transform transition ease duration-500">
				<template v-if="game.state.phase === 'end'">
					<BigButton
						class="bg-gradient-to-br from-green-700 to-green-800"
						v-if="game.isOwnGame"
						@click="game.newRound()"
					>
						New round
					</BigButton>
				</template>
				<template v-else>
					<div class="font-fat opacity-20 text-3xl pr-2">
						<template v-if="game.isBust">You are bust.</template>
					</div>
					<BigButton
						class="bg-gradient-to-br from-red-800 to-red-900 uppercase"
						:disabled="!game.isYourTurn || !game.mayHit"
						@click="game.hit()"
					>
						Hit
					</BigButton>
					<BigButton
						class="bg-gradient-to-br from-blue-800 to-blue-900 uppercase"
						:disabled="!game.isYourTurn || game.isForcedToHit"
						@click="game.stay()"
					>
						Stay
					</BigButton>
				</template>
			</div>
		</div>
		<GameEndModal/>
	</div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import { useGame } from "../clientGame"
	import PlayerCards from "./PlayerCards.vue"
	import BigButton from "./BigButton.vue"
	import { computed } from "vue"
	import { useAuth } from "../auth"
	import GameEndModal from "./GameEndModal.vue"
	import SpecialCard from "./SpecialCard.vue"

	const game = useGame()
	const auth = useAuth()

	const reorderedPlayerIds = computed(() => {
		const ids = game.state.players.map(p => p.id)
		const selfIndex = ids.findIndex(id => id === auth.requiredUser.id)
		let front = ids.slice(0, selfIndex + 1)
		let back = ids.slice(selfIndex + 1)
		return [...back, ...front]
	})
</script>