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 } = 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: "200px",
				overflow: "scroll",
				"scrollbar-width": "none",
				display: "flex",
				gap: "5px",
			}}
		>
			<For each={props.hand}>
				{(card) => (
					<Card
						card={card}
						style={{
							cursor: "pointer",
						}}
						onClick={() =>
							setGameState(
								produce((state) => {
									const index = state.hand.indexOf(card);
									console.log(index);
									state.deck.push(
										state.hand.splice(
											props.hand.indexOf(card),
											1
										)[0]!
									);
								})
							)
						}
					/>
				)}
			</For>
		</div>
	);
}) satisfies Component<{ hand: Hand }>;