import React from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const styles = {margin:12}

class FormInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address:null,
      name:null,
      accounts:[],
      detail:{}
    };

    this.props.getAccounts(accounts => {
      this.setState({
        address:accounts[0],
        accounts:accounts
      })
    })
    this.props.getDetail(detail => {
      this.setState({
        detail:detail
      })
    })
    this.props.eventEmitter.on('change', detail => {
      console.log('DETAIL', detail)
      this.setState({detail:detail});
    });
  }

  handleAction(actionName) {
    this.setState({
      name: null,
    });
    this.props.action(actionName, this.state.address.trim(), this.state.name)
  }

  handleSelect(event,index,value){
    this.setState({
      address: value,
    });
  }

  isOwner(){
    return this.state.accounts.includes(this.state.detail.owner);
  }

  showRegister(){
    return this.state.detail.canRegister
  }

  showPayback(){
    return this.state.detail.canPayback
  }

  showCancel(){
    return this.state.detail.canCancel
  }

  handleName(e) {
    this.setState({
      name: e.target.value,
    });
  }

  render() {
    let adminButtons, registerButton;
    if(this.isOwner()){
      adminButtons = <span>
        <RaisedButton secondary={this.showPayback()} disabled={!this.showPayback()}
            label="Payback" style={styles}
            onClick={this.handleAction.bind(this, 'payback')}
        />
        <RaisedButton secondary={this.showCancel()} disabled={!this.showCancel()}
            label="Cancel" style={styles}
            onClick={this.handleAction.bind(this, 'cancel')}
        />
      </span>
    }

    if(this.state.accounts.length > 0){
      console.log('detail', this.state.detail.ended, this.state.detail)
      if(this.state.detail.ended){
        registerButton = <span>This even is over </span>
      }else if (this.state.detail.limitOfParticipants > this.state.detail.registered){
        registerButton = <RaisedButton secondary={this.showRegister()} disabled={!this.showRegister()}
          label="Register" style={styles}
          onClick={this.handleAction.bind(this, 'register')}
        />
      }else{
        registerButton = <span>No more spots left</span>
      }
    }else{
      registerButton = <span>No account is set</span>
    }

    return (
      <Paper zDepth={1}>
        <form>
          <TextField
            hintText="@twitter_handle"
            floatingLabelText="Twitter handle"
            floatingLabelFixed={true}
            value={this.state.name}
            onChange={this.handleName.bind(this)}
            style={{margin:'0 5px'}}
          />
          <SelectField
            value={this.state.address}
            onChange={this.handleSelect.bind(this)}
            floatingLabelText="Account address"
            floatingLabelFixed={true}
            style={{width:'25em', verticalAlign:'top', margin:'0 5px'}}
            >
            {
              this.state.accounts.map(account => {
                return (<MenuItem value={account} primaryText={account} />)
              })
            }
          </SelectField>

          {registerButton}
          {adminButtons}
        </form>
      </Paper>
    );
  }
}

export default FormInput;

@@ -2073,54 +2073,68 @@
     
-console.log('detail', this.state.detail.ended,
+var availableSpots = this.state.detail.limitOfParticipants -
  thi
@@ -2143,25 +2143,36 @@
 state.detail
-)
+.registered;
 %0A      if(th
@@ -2272,77 +2272,98 @@
 if (
-this.state.detail.limitOfParticipants %3E this.state.detail.registered)
+availableSpots %3C= 0)%7B%0A        registerButton = %3Cspan%3ENo more spots left%3C/span%3E%0A      %7Delse
 %7B%0A  
@@ -2562,24 +2562,24 @@
 register')%7D%0A
+
         /%3E%0A 
@@ -2581,78 +2581,8 @@
  /%3E%0A
-      %7Delse%7B%0A        registerButton = %3Cspan%3ENo more spots left%3C/span%3E%0A
     

Fix bug showing No more spots left when there are more spots available.