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

export default (props: { playerKey: string } & Stylable) => {
	const table = useContext(TableContext);
	const playerReady =
		table?.wsEvents
			.filter((evt) => evt.playersReady != null)
			.map((evt) => evt.playersReady![props.playerKey])
			.thru((Evt) => createObservableWithInit(Evt, false)) ??
		createSignal(false)[0];

	const game = useContext(GameContext);

	return (
		<div
			id={`player-${props.playerKey}`}
			style={{
				...props.style,
				"background-color": playerColor(props.playerKey),
				...(playerReady() && table?.view() == null
					? {
							border: "10px solid green",
					  }
					: {}),
			}}
			class={`${props.class} w-20 h-20 rounded-full flex justify-center items-center`}
		>
			<p style={{ "font-size": "1em" }}>
				{profile(props.playerKey)()?.name}
			</p>
		</div>
	);
};