import React, { Component } from 'react'
import { connect } from 'react-redux'

import RaisedButton from 'material-ui/RaisedButton'

import { submitMode, nextMode } from 'host/actions'

import { getMode } from 'util/index'

const modes = ["wait", "description", "auction", "result"]

const mapStateToProps = ({ mode }) => ({
  mode
})

class ModeButtons extends Component {
  changeMode(mode) {
    const { dispatch } = this.props
    dispatch(submitMode(mode))
  }

  nextMode(mode) {
    const { dispatch } = this.props
    dispatch(nextMode())
  }

  render() {
    const buttons = []
    for (let i = 0; i < modes.length; i ++) {
      buttons[i] = (
        <RaisedButton key={i} onClick={this.changeMode.bind(this, modes[i])} secondary={modes[i] == this.props.mode } style={{ marginRight: i == 0 ? '2%' : '0%' }}>
          {getMode(modes[i])}
        </RaisedButton>
      )
    }
    return (
      <span>
        {buttons}
        <RaisedButton onClick={this.nextMode.bind(this)} primary={true} style={{ marginLeft: '3%' }}>次へ</RaisedButton>
      </span>
    )
  }
}

export default connect(mapStateToProps)(ModeButtons)

@@ -124,16 +124,80 @@
 dButton'
+%0Aimport %7B Step, Stepper, StepButton %7D from 'material-ui/Stepper'
 %0A%0Aimport
@@ -618,24 +618,56 @@
  render() %7B%0A
+    const %7B mode %7D = this.props%0A
     const bu
@@ -757,28 +757,43 @@
    %3C
-RaisedButton key=%7Bi%7D
+Step key=%7Bi%7D%3E%0A          %3CStepButton
  onC
@@ -839,208 +839,202 @@
 i%5D)%7D
- secondary=%7Bmodes%5Bi%5D == this.props.mode %7D style=%7B%7B marginRight: i == 0 ? '2%25' : '0%25' %7D%7D%3E%0A          %7BgetMode(modes%5Bi%5D)%7D%0A        %3C/RaisedButton%3E%0A      )%0A    %7D%0A    return (%0A      %3Cspan%3E%0A        %7Bbuttons%7D
+%3E%7BgetMode(modes%5Bi%5D)%7D%3C/StepButton%3E%0A        %3C/Step%3E%0A      )%0A    %7D%0A    return (%0A      %3Cspan%3E%0A        %3CStepper activeStep=%7Bmodes.indexOf(mode)%7D linear=%7Bfalse%7D%3E%0A          %7Bbuttons%7D%0A        %3C/Stepper%3E
 %0A   

Use material-ui/Stepper