<script lang="ts">
import SciFiButton from "./SciFi-Button.svelte";
import { createEventDispatcher } from "svelte";
import { myName, isHost } from "../stores";
import type { IColour } from "common";

export let name: string;
export let colour: IColour;

const emit = createEventDispatcher();

function exitPlayer() {};

function changeColour() {
	emit("changeColour");
};

let canLeave = $isHost || name == $myName;
</script>

<div class="player" style="--colour: {colour.hex};">

	<!-- The player's change Colour button -->
	{#if $myName == name}
		<SciFiButton
			background="{colour.hex}"
			on:click={changeColour}
			height="60px"
			width="60px"
			hoverBackground="{colour.hex}"
		>
			<div style="display: flex; align-items: center; justify-content: center;">
				<img
					src="/assets/icons/change_colour.svg"
					alt="Change your spaceship's colour"
					style="baseline: center"
				>
			</div>
		</SciFiButton>

	<!-- The placeholder element that just gets coloured for other player colours -->
	{:else}
		<div class="player-colour"></div>
	{/if}

	<!-- The player's name -->
	<div class="player-name">
		<span class="name">
			{name}
		</span>
		{#if $myName == name}
			<span class="player-indicator">
				You
			</span>
		{/if}
	</div>


	<!-- Whether or not to show the kick Player button in the row -->
	{#if canLeave}
	<SciFiButton
		background="#ff0000"
		on:click={exitPlayer}
		height="60px"
		width="75px"
		hoverBackground="#ff0000"
	>
		<div style="display: flex; align-items: center; justify-content: center;">
			<img
				src="/assets/icons/kick_person.svg"
				alt="Remove person from the game"
				style="baseline: center"
			>
		</div>
	</SciFiButton>
	{/if}
</div>

<style lang="scss">
@import "../styles/mixins";

.player {
	height: 70px;
	display: flex;
	align-items: center;
	text-align: left;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	margin: 10px;
	max-width: 95%;

	> div.player-colour {
		margin: 10px;
		width: 40px;
		height: 40px;
		background: var(--colour);
		display: inline-block;
		border-radius: 7px;
	}

	> .player-name {
		flex-grow: 1;
		display: flex;
		align-items: center;

		.name {
			flex-grow: 1;
		}
	}

	.player-indicator {
		border-radius: 5px;
		background-color: #00aa00;
		color: black;
		padding: 5px 7px;
	}

	@include medium {
		max-width: 47%;
	}
}
</style>