'use client'

import React from "react"
import { Client, Room } from "colyseus.js"
import { Box, Button } from "@mui/material";


interface TixTaxLike{
  playerOne: { name: string; coins: number },
  playerTwo: { name: string; coins: number }

}

export default function Page() {
  const [client] = React.useState(() => new Client("http://prospera:2567"));
  const [room, setRoom] = React.useState<Room<TixTaxLike>>();
  const [state, setState] = React.useState<TixTaxLike | undefined>(undefined);

  const handleFindMatch = async () => {
    const room = await client.joinOrCreate("tix_tax")
    setRoom(room);
    room.onStateChange((state) => {
      setState(state)
    })

    room.onLeave(() => {
    })
  }
  return (
    <>
      <Box>
        Welcome to Tix Tax
        <Button>
          How to play
        </Button>
      </Box>
      {state ? <TixTax state={state}/> : <>
        <Button onClick={handleFindMatch} >
          Find a match
        </Button>
      </>}


      <div style={{
        display: "grid",
        gridTemplateColumns: "300px 300px 300px",
        gridAutoRows: "300 px",
        gap: "1em",
        
        justifyItems: "center",
        alignItems: "center",
        
        justifyContent: "center",
        alignContent: "center"
      }}>
        {Array.from({ length: 11 }, (_, index) => (
          <div style={{
            height: "200px",
            width: "200px",
            padding: "2em",
            backgroundColor: "var(--primary-color)",
            color: "white",
            textAlign: "center",
            "borderRadius": "8px",
            fontSize: "2rem",

          }}>{index + 1}</div>
        ))}
      </div>
    </>
  )
}

function TixTax({ state }: { state: TixTaxLike} ){
  return (
    <>
      <Box>
        Player one Coins {state.playerOne.coins}
      </Box>
      <Box>
        {Array.from({ length: 3 }, (_, i) => (
          <Box sx={{
            border: 2,
            display: "grid",
            placeContent: "center"
          }}>
          {Array.from({ length: 3 }, (_, j) => (
            <Box sx={{
                border: 2,
              }}>
                
            </Box>
          ))}

          </Box>
        ))}
      </Box>
    </>
  )
}
