"use client";

import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

export default function Game(props: { params: Promise<{ id: string }> }) {
  const params = React.use(props.params);
  const [moves, setMoves] = useState<number[]>([]);
  const [message, setMessage] = useState<string>();
  const [isEnd, setEnd] = useState(false);
  const router = useRouter();
  const board: string[] = "         ".split("");
  for (let i = 0; i < moves.length; i++) {
    board[moves[i] - 1] = (i % 2 == 0 ? "X" : "O");
  }
  useEffect(() => {
    const fetchData = async () => {
      const game = await fetch("/api/getGame", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: params.id,
        }),
      }).then((e) => e.json());
      if(game.message == "Invalid game id"){
        setMessage(game.message);
        setEnd(true);
        return;
      }
      setMoves(game.message.moves || []);
      if(game.message.result != null){
        setEnd(true);
        setMessage(game.message.result);
      }
    };
    fetchData();
  }, [params.id]);
  async function clickHandler(num: number) {
    await fetch("/api/move", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: params.id,
        move: num,
      }),
    })
      .then(async (e) => {
        const res = await e.json();
        if (e.status != 200) throw new Error(res.message);
        setMoves(res.message.moves || []);
        setMessage(res.message.result || "");
        if (res.message.result != null) {
          setEnd(true);
        }
      })
      .catch((error) => {
        console.log(error.text);
        setMessage(error.message);
      });
  }
  console.log(params.id);