import { Component, For, useContext } from "solid-js";
import Card from "./Card";
import { Hand } from "../types/cards";
import { GameContext } from "./Game";
import { produce } from "solid-js/store";

export default ((props) => {
	const { setGameState, gameState } = useContext(GameContext)!;

	return (
		<div
			class="hand"
			style={{
				"min-width": "100px",
				width: "fit-content",
				"max-width": "80%",
				border: "2px dashed white",
				"border-radius": "12px",
				margin: "10px",
				"margin-bottom": "25px",
				padding: "10px",
				height: "180px",
				overflow: "scroll",
				"scrollbar-width": "none",
				display: "flex",
				gap: "5px",
			}}
		>
			<For each={props.hand}>
				{(card) => (
					<Card
						card={card}
						style={{
							cursor: "pointer",
						}}
						onClick={() => {
							const index = gameState()!.hand.indexOf(card);
							setGameState({
								deck: [card, ...gameState()!.deck],
								hand: [
									...gameState()!.hand.slice(0, index),
									...gameState()!.hand.slice(index + 1),
								],
							});
						}}
					/>
				)}
			</For>
		</div>
	);
}) satisfies Component<{ hand: Hand }>;