import { Accessor, createContext, For, useContext } from "solid-js";
import type {
	SimpleAction,
	SimplePlayerView,
	SimpleResult,
} from "@games/shared/games/simple";
import { me } from "~/profile";
import Hand from "./Hand";
import Pile from "./Pile";
import { TableContext } from "./Table";
import { Portal } from "solid-js/web";
import FannedHand from "./FannedHand";

export const GameContext = createContext<{
	view: Accessor<SimplePlayerView>;
	submitAction: (action: SimpleAction) => any;
}>();

export default () => {
	const table = useContext(TableContext)!;
	const view = table.view as Accessor<SimplePlayerView>;
	const submitAction = (action: SimpleAction) => table.sendWs({ action });

	return (
		<GameContext.Provider value={{ view, submitAction }}>
			<Pile
				count={view().deckCount}
				class="cursor-pointer fixed center"
				onClick={() => submitAction({ type: "draw" })}
			/>

			<Hand
				class="fixed bc"
				hand={view().myHand}
				onClickCard={(card) => submitAction({ type: "discard", card })}
			/>
			<div
				class="absolute tc text-align-center"
				style={{
					"background-color":
						view().playerTurn == me() ? "var(--yellow)" : "transparent",
					color: view().playerTurn == me() ? "var(--dark)" : "var(--light)",
				}}
			>
				It's{" "}
				<span class="font-bold">
					{view().playerTurn == me()
						? "your"
						: table.playerNames[view().playerTurn] + "'s"}
				</span>{" "}
				turn
			</div>
			<button
				class="button fixed tl m-4 p-1"
				onClick={() => {
					table.sendWs({ quit: true });
				}}
			>
				Quit
			</button>
			<For each={Object.entries(view().playerHandCounts)}>
				{([playerKey, handCount], i) => (
					<Portal
						mount={document.getElementById(`player-${playerKey}`)!}
						ref={(ref) => {
							const midOffset =
								i() + 0.5 - Object.values(view().playerHandCounts).length / 2;

							ref.style = `position: absolute; display: flex; justify-content: center; top: 65%;`;
						}}
					>
						<FannedHand handCount={handCount} />
					</Portal>
				)}
			</For>
		</GameContext.Provider>
	);
};