import React, { Component } from 'react';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import {Card, CardHeader, CardActions, CardText} from 'material-ui/Card';

import './Lobby.css';

const names = [
  'Wes',
  'Sarah',
  'Kevin',
  'Jason',
  'Bernard',
  'Ruby',
  'Nadine',
  'Clement',
  'Hannah',
  'Gilia',
];

class Lobby extends Component {
  constructor(props) {
    super(props);
    const randy = Math.floor((Math.random() * 1000) + 1);
    const bottle = Math.floor((Math.random() * names.length));
    const selected = names[bottle] + "x" + randy;
    
    this.state = {
      name: selected,
    };
  }

  create() {
    fetch('/api/createroom', {
      accept: 'application/json',
    }).then(response => {
      return response.json();
    }).then(response => {
      console.log(response);
      this.setState({
        id: response
      })
    });
  }

  render() {
    return (
      <div className="Lobby">
        <Card>
          <CardHeader
            title="Telephone Pictionary"
            subtitle="Create or join a game"
            style={{"width": "40vw"}}
          />
          <CardText>
            <TextField
              hintText="Your Name"
              defaultValue={this.state.name}
            />
          </CardText>
          <CardActions>
            <FlatButton 
              onClick={this.create.bind(this)}
              label="Create Game"
            />
            <FlatButton 
              label="Join Game" 
            />
          </CardActions>
        </Card>
      </div>
    )
  }
}

export default Lobby;

@@ -1350,32 +1350,79 @@
    %3CFlatButton %0A
+              disabled=%7Bthis.state.id != null%7D%0A
               on
@@ -1452,16 +1452,16 @@
 (this)%7D%0A
-
         
@@ -1518,32 +1518,79 @@
    %3CFlatButton %0A
+              disabled=%7Bthis.state.id != null%7D%0A
               la
@@ -1638,32 +1638,32 @@
  %3C/CardActions%3E%0A
-
         %3C/Card%3E%0A
@@ -1657,24 +1657,290 @@
      %3C/Card%3E
+%0A%0A        %7Bthis.state.id != null &&%0A            %3CCard%3E%0A              %3CCardHeader%0A                title=%22Lobby Status%22%0A                subtitle=%7B%22ID: %22 + this.state.id%7D%0A              /%3E%0A              %3CCardText%3E%0A              %3C/CardText%3E %0A            %3C/Card%3E%0A        %7D
 %0A      %3C/div

Add a pane that appears when ID is set