import React, { useState, useEffect } from 'react';
import { Link } from "react-router-dom";
import {read} from '../../user/api-user.js'
import auth from '../../auth/auth-helper'
import './Join.css';

export default function SignIn(props) {

  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  const [id, setId] = useState('');
  const [values, setValues] = useState({
    user: '',
    redirectToSignin: false,
  })
  const jwt = auth.isAuthenticated()

  
 
  return (
    <div className="joinOuterContainer">
      <div className="joinInnerContainer">
        <h1 className="heading">Join</h1>
        <div>
          <input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)} />
        </div>
        <div>
          <input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)} />
        </div>
        <Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat/${id}?name=${name}&room=${room}`}>
          <button className={'button mt-20'} type="submit">Sign In</button>
        </Link>
      </div>
    </div>
  );
}
