'use strict';

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import { Button, SplitButton, MenuItem } from 'react-bootstrap';

import Solitaire from 'solitaire';
import Multiplayer from 'multiplayer';

class SetApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      games: {}
    };
  }

  componentWillMount() {
    let onSuccess = function(response) {
      this.setState({
        'games': response
      });
    }.bind(this);
    let onError = function(response) {
      this.setState({
        'error': response
      });
    }.bind(this);
    $.get('/multiplayer/status').then(onSuccess, onError);
  }

  startSolitaire() {
    $.get('/solitaire').then((response) => {
      render(
        <Solitaire url="/solitaire" />, document.getElementById('content')
      );
    });
  }

  startMultiplayer(gameName) {
    return (evt) => {
      $.get('/multiplayer/go', {
        name: gameName
      }).then((response) => {
        render(
          <Multiplayer url="multiplayer" {...response} />, document.getElementById('content')
        );
      });
    };
  }

  render() {
    return (
      <div id="index-wrapper">
        <Button bsSize="large"
                bsStyle="default"
                key="solitaire"
                onClick={this.startSolitaire}
                id="solitaire_button">Solitaire Set</Button>
        <SplitButton bsSize="large"
                     bsStyle="default"
                     key="multiplayer"
                     title="Multiplayer Set"
                     id="multiplayer_split_button"
                     onClick={this.startMultiplayer()}>
          {$.map(this.state.games, (value, key) => {
            return (
              <MenuItem eventKey={key}
                        key={key}
                        onSelect={this.startMultiplayer(key)}>
                {`${key} => ${value} player${value == 1 ? '' : 's'}`}
              </MenuItem>
            );
          })}
        </SplitButton>
      </div>
    );
  }
}

render(
  <SetApp />, document.getElementById('content')
);

@@ -116,29 +116,26 @@
 on, 
-SplitButton, MenuItem
+MenuItem, Dropdown
  %7D f
@@ -1410,21 +1410,61 @@
        %3C
-Split
+Dropdown id=%22multiplayer_button%22%3E%0A          %3C
 Button b
@@ -1469,35 +1469,32 @@
  bsSize=%22large%22%0A
-   
                 
@@ -1527,27 +1527,24 @@
             
-   
 key=%22multipl
@@ -1571,18 +1571,42 @@
     
-   title=%22
+onClick=%7Bthis.startMultiplayer()%7D%3E
 Mult
@@ -1616,17 +1616,25 @@
 ayer Set
-%22
+%3C/Button%3E
 %0A       
@@ -1640,105 +1640,147 @@
     
-           id=%22multiplayer_split_button%22%0A                     onClick=%7Bthis.startMultiplayer()%7D%3E%0A
+%3CDropdown.Toggle bsSize=%22large%22%0A                           disabled=%7B!Object.keys(this.state.games).length%7D /%3E%0A          %3CDropdown.Menu%3E%0A  
     
@@ -1836,24 +1836,26 @@
             
+ 
+ 
 return (%0A   
@@ -1847,24 +1847,26 @@
    return (%0A
+  
             
@@ -1884,32 +1884,34 @@
  eventKey=%7Bkey%7D%0A
+  
                 
@@ -1952,16 +1952,18 @@
         
+  
 onSelect
@@ -1993,16 +1993,18 @@
 (key)%7D%3E%0A
+  
         
@@ -2079,16 +2079,18 @@
         
+  
 %3C/MenuIt
@@ -2097,32 +2097,34 @@
 em%3E%0A            
+  
 );%0A          %7D)%7D
@@ -2120,16 +2120,18 @@
         
+ 
+ 
 %7D)%7D%0A    
@@ -2138,20 +2138,44 @@
     
-%3C/SplitButto
+  %3C/Dropdown.Menu%3E%0A        %3C/Dropdow
 n%3E%0A 

disable dropdown menu if no games