import { useState, useEffect } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import Connecting from "./apps/Connecting.jsx";
import Waiting from "./apps/Waiting.jsx";
import Gaming from "./apps/Gaming.jsx";
import Failed from "./apps/Failed.jsx";
import type { WatchState } from "./WatchState.js";

type Props = {
  gameId: number;
};

type WebSocketMessage =
  | { type: "connect" }
  | { type: "prepare"; data: { problem: string } }
  | { type: "ready" }
  | { type: "start"; data: { startTime: string } }
  | {
      type: "finish";
      data: { yourScore: number | null; opponentScore: number | null };
    }
  | { type: "score"; data: { score: number } }
  | { type: "code"; data: { code: string } }
  | {
      type: "watch";
      data: {
        problem: string;
        scoreA: number | null;
        codeA: string;
        scoreB: number | null;
        codeB: string;
      };
    };

export default function App({ gameId }: Props) {
  // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/watch/`;
  const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/watch/`;

  const { lastJsonMessage, readyState } =
    useWebSocket<WebSocketMessage>(socketUrl);

  const [watchState, setWatchState] = useState<WatchState>("connecting");

  const [problem, setProblem] = useState<string | null>(null);

  const [scoreA, setScoreA] = useState<number | null>(null);
  const [codeA, setCodeA] = useState<string | null>(null);
  const [scoreB, setScoreB] = useState<number | null>(null);
  const [codeB, setCodeB] = useState<string | null>(null);

  useEffect(() => {
    if (readyState === ReadyState.UNINSTANTIATED) {
      setWatchState("failed");
    } else if (
      readyState === ReadyState.CLOSING ||
      readyState === ReadyState.CLOSED
    ) {
      if (watchState !== "finished") {
        setWatchState("failed");
      }
    } else if (readyState === ReadyState.CONNECTING) {
      setWatchState("connecting");
    } else if (readyState === ReadyState.OPEN) {
      if (lastJsonMessage !== null) {
        if (lastJsonMessage.type === "watch") {
          const {
            problem,
            scoreA: scoreA_,
            codeA: codeA_,
            scoreB: scoreB_,
            codeB: codeB_,
          } = lastJsonMessage.data;
          setProblem(problem);
          setScoreA(scoreA_);
          setCodeA(codeA_);
          setScoreB(scoreB_);
          setCodeB(codeB_);
          setWatchState("gaming");
        } else {
          setWatchState("failed");
        }
      } else {
        setWatchState("waiting");
      }
    }
  }, [readyState, lastJsonMessage]);

  return (
    <div>
      <h1>Game #{gameId} watching</h1>
      <div>
        {watchState === "connecting" ? (
          <Connecting gameId={gameId} />
        ) : watchState === "waiting" ? (
          <Waiting gameId={gameId} />
        ) : watchState === "gaming" || watchState === "finished" ? (
          <Gaming
            gameId={gameId}
            problem={problem}
            scoreA={scoreA}
            codeA={codeA}
            scoreB={scoreB}
            codeB={codeB}
          />
        ) : (
          <Failed gameId={gameId} />
        )}
      </div>
    </div>
  );
}