import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

import { Title } from "../ui/title";
import { Button } from "../ui/button";
import { Input } from "../ui/input";

const Join = (props) => {
  const {socket} = props
  const [user, setUser] = useState('');
  const { id } = useParams();

  const handleInput = (e) => {
    setUser(e.target.value);
  };
 
  const submit = () => {
    const data = {poll:id, user:user};
    socket.emit('join', data); // triggers onRegister
    console.log('JOIN submit data: ', data)
  };

  return (
    <div>
      <div className="">
        <Title variant={2} label="Nickname:" />
        <Input
          name="title"
          getRef={(ref) => handleInput(ref.current)}
          placeholder="Choose a name to vote...."
          value={user}
          onChange={handleInput}
        />
      </div>
      <div className='mt-8'>
        <Button
            disabled={!user}
            label="Let's vote!"
            onClick={submit}
            big
          />
      </div>
    </div>
  );
}

export default Join