import BusinessTypeSetting from "@/_BusinessTypeSetting/BusinessTypeSetting";
import CSMessage from "@/Common/Message/CSMessage";
import Image from "@/components/Image/Image";
import { GameItemsContext, SlotData } from "@/context/GameItemsContext";
import { GameLaunchRequest, GameLeaveRequest, RpcGameLaunchResponse } from "@/define/Request/GameRequest";
import { CoroutineV2 } from "@/Engine/CatanEngine/CoroutineV2/CoroutineV2";
import { INetResponse } from "@/Engine/CatanEngine/NetManagerV2/Core/INetResponse";
import CSSettingsSDV3 from "@/FormTableSD/CSSettingsSDV3";
import { Button, Card } from "antd";
import { useContext, useState } from "react";
import SDGame from "./SDGame";

const SlotList = () => {
	const { gameData, setGameData } = useContext(GameItemsContext);
	const { slotData, slotList = [], nowSlotId } = gameData;
	const [isGameIn, setIsGameIn] = useState<boolean>(false);
	const [gameUrl, setGameUrl] = useState<string>("");

	function* onClickSlotIn(slotId: number): IterableIterator<any> {
		const data: SlotData = slotData[slotId];
		const [componyID] = data;
		const req: GameLaunchRequest = new GameLaunchRequest(componyID, slotId);
		yield req.SendAsync();
		const resp: INetResponse<RpcGameLaunchResponse> = req.Result;

		if (!resp.IsValid) {
			if (resp.Status === 18) {
				CSMessage.CreateYesMsg(CSSettingsSDV3.prototype.CommonString(16));
			}
			return;
		}

		setIsGameIn(true);
		setGameData({ ...gameData, nowSlotId: slotId });

		const url: string = resp.Data;
		const SDType = 2;
		if (componyID === SDType) {
			setGameUrl(url);
		} else {
			window.open(url, "_blank");
		}
	}

	function onClickSlotOut() {
		const gameLeaveReq: GameLeaveRequest = new GameLeaveRequest(nowSlotId);
		gameLeaveReq.Send();
		setGameUrl("");
		setIsGameIn(false);
	}

	// ===== styles =====
	const gridStyle: React.CSSProperties = {
		display: "grid",
		gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
		gap: "20px",
		padding: "20px",
		overflowY: "auto",
		height: "100%",
	};

	const cardStyle: React.CSSProperties = {
		borderRadius: "14px",
		cursor: "pointer",
		transition: "transform .15s ease, box-shadow .15s ease",
		overflow: "hidden",
		height: "120px"
	};

	const cardHover: React.CSSProperties = {
		transform: "scale(1.05)",
		boxShadow: "0 6px 18px rgba(0,0,0,0.2)",
	};

	return (
		<>
			{isGameIn ? (
				<>
					{gameUrl ? (
						<SDGame gameUrl={gameUrl} onClickSlotOut={onClickSlotOut} />
					) : (
						<div style={{ padding: 20 }}>
							<Button type="primary" onClick={onClickSlotOut}>
								離開機台
							</Button>
						</div>
					)}
				</>
			) : (
				<div style={{ height: "100%", background: "rgba(0,0,0,0.02)", borderRadius: 12 }}>
					<div style={gridStyle}>
						{slotList.map((slotId: number) => (
							<Card
								key={slotId}
								hoverable
								style={cardStyle}
								styles={{
									body: {
										padding: 0
									}
								}}
								onMouseEnter={(e) => Object.assign(e.currentTarget.style, cardHover)}
								onMouseLeave={(e) =>
									Object.assign(e.currentTarget.style, {
										transform: "scale(1)",
										boxShadow: "none",
									})
								}
								onClick={() => CoroutineV2.Single(onClickSlotIn(slotId)).Start()}
							>
								<Image
									width={"100%"}
									height={120}
									src={`${BusinessTypeSetting.UseDownloadUrl}/game/${slotId}/s`}
									style={{ objectFit: "cover" }}
								/>
							</Card>
						))}
					</div>
				</div>
			)}
		</>
	);
};

export default SlotList;
