import React, { useState } from "react";
import "./PlayerName.css";
import { TextField, Button } from '@material-ui/core';

const PlayerName = ({ name, setName }) => {
  const [edit, setEdit] = useState(name);

  const sendName = () => {
    setName(edit);
  }
  
  const nameChange = (event) => {
    setEdit(event.target.value);
  }
  
  const nameKeyPress = (event) => {
    if (event.key === "Enter") {
      setName(edit ? edit : name);
    }
  }

  return (
    <div className="PlayerName">
      <TextField className="nameInput"
        onChange={nameChange}
        onKeyPress={nameKeyPress}
        label="Enter your name"
        variant="outlined"
        value={edit}
        />
        <Button onClick={sendName}>Set</Button>
    </div>
  );
};

export { PlayerName };