<template>
	<Modal :is-active="isActive" @close-request="isActive = false">
		<div v-if="game.state.phase === 'end'" class="p-10 text-center">
			<div class="h-11 transform -translate-y-35 opacity-90 text-40">
				<CrownIcon v-if="singleWinner !== null"/>
				<HandshakeIcon v-else/>
			</div>
			<div class="font-fat text-6xl">
				{{ singleWinner?.name ?? "Draw" }}
			</div>
			<div class="text-3xl pt-5 font-bold">
				<template v-if="singleWinner !== null">
					wins with
					<span class="text-green-500">{{ getNumberCardsSum(singleWinner.numberCards) }}</span>
					point{{ getNumberCardsSum(singleWinner.numberCards) === 1 ? "" : "s" }}.
				</template>
				<template v-else>
					between {{ naturallyJoinEnumeration(game.state.winnerIds.map(id => game.state.players.find(p => p.id === id).name)) }}
				</template>
			</div>
		</div>
	</Modal>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import { computed, ref } from "vue"
	import { useGame, useGameActionNotification } from "../clientGame"
	import Modal from "./Modal.vue"
	import CrownIcon from "virtual:icons/ph/crown-simple-duotone"
	import HandshakeIcon from "virtual:icons/ph/handshake-duotone"
	import { getNumberCardsSum } from "../../shared/game/state"
	import { naturallyJoinEnumeration } from "../../shared/util"

	const game = useGame()
	const isActive = ref(false)

	const singleWinner = computed(() => {
		const winnerIds = game.state.winnerIds
		return winnerIds?.length === 1 ? game.state.players.find(p => p.id === winnerIds[0])! : null
	})

	useGameActionNotification(action => {
		if (action.type === "end") {
			isActive.value = true
		}
	})
</script>