import React, { useEffect, useState } from 'react'
import {
  Box, Button, CssBaseline, TextField, Typography
} from '@mui/material'
import BackgroundImg from '../BackgroundImage.png'
import Logo from '../BigBrainLogo.png'
import playerService from '../BackendRequests/playerRequest.jsx'
import { useNavigate, useParams, Link as URLlink } from 'react-router-dom'

const buttonStyle = {
  mt: 3,
  mb: 2,
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
}

const JoinGamePage = () => {
  const [playerName, setPlayerName] = useState('');
  const [sessionId, setSessionId] = useState('');
  const sIdInUrl = useParams().sId;
  // console.log(sIdInUrl);
  const navigate = useNavigate();

  useEffect(() => {
    if (sIdInUrl) setSessionId(sIdInUrl);
  }, [])

  const handleJoin = async (e) => {
    e.preventDefault();
    const res = await playerService.join(sessionId, playerName)
    console.log(res)
    navigate(`/play/${sessionId}/${res.playerId}`);
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundImage: `url(${BackgroundImg})`,
        minHeight: '100vh',
        height: 'auto',
      }}
    >
      <CssBaseline />
      <img src={Logo} width="150" height="150"></img>
      <Box component="form" onSubmit={handleJoin} sx={{ width: 450 }}>
        <Typography fontWeight='bold'>Session Id</Typography>
        <TextField
          margin="normal"
          required
          fullWidth
          label="Session Id"
          value={sessionId}
          autoFocus
          onChange={({ target }) => setSessionId(target.value)}
        />
        <Typography fontWeight='bold'>Enter a name</Typography>
        <TextField
          margin="normal"
          required
          fullWidth
          label="Player Name"
          id="playerName"
          onChange={({ target }) => setPlayerName(target.value)}
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={buttonStyle}
        >
          JOIN
        </Button>
        <Typography textAlign='center'>- OR -</Typography>
        <Button
          fullWidth
          variant="contained"
          sx={buttonStyle}
          component={URLlink} to="/">
          Login to create your own quiz
        </Button>

      </Box>
    </Box>
  )
}

export default JoinGamePage;