import { createSignal, onMount, useContext } from "solid-js";
import { createObservableWithInit, extractProperty } from "~/fn";
import { playerColor } from "~/profile";
import { TableContext } from "./Table";
import { Stylable } from "./toolbox";

export default (props: { playerKey: string } & Stylable) => {
	const table = useContext(TableContext);

	onMount(() => console.log("Player mounted"));

	return (
		<div
			ref={(e) => table?.setPlayers(props.playerKey, "ref", e)}
			style={{
				...props.style,
				"background-color": playerColor(props.playerKey),
				...(table?.view() == null && table?.players[props.playerKey].ready
					? {
							border: "10px solid green",
					  }
					: {}),
			}}
			class={`${props.class} w-20 h-20 rounded-full flex justify-center items-center`}
		>
			<p class="font-[1em] text-align-center">
				{table?.players[props.playerKey].name}
			</p>
		</div>
	);
};