text: import React from 'react'
  import CssBaseline from '@material-ui/core/CssBaseline'
  import Stepper from '@material-ui/core/Stepper'
  import Step from '@material-ui/core/Step'
  import Paper from '@material-ui/core/Paper'
  import StepButton from '@material-ui/core/StepButton'
  import StepLabel from '@material-ui/core/StepLabel'
  import ButtonGroup from '@material-ui/core/ButtonGroup'
  import Grid from '@material-ui/core/Grid'
  import Container from '@material-ui/core/Container'
  import { Translate } from 'react-translated'
  import Footer from './Footer.js'
  import Body from './Body.js'
  
  
  export default class BankDeetsStepper extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        activeStep: 0
      }
      this.handleNext = this.handleNext.bind(this)
      this.handleBack = this.handleBack.bind(this)
      this.handleReset = this.handleReset.bind(this)
      this.setStep = this.setStep.bind(this)
    }
  
    handleNext() {
      const step = this.state.activeStep + 1
      this.setState({ activeStep: step })
    }
  
    handleBack() {
      const step = this.state.activeStep - 1
      this.setState({ activeStep: step })
    }
  
    handleReset() {
      this.setState({ activeStep: 0 })
      this.props.clearBankDetails()
    }
  
    setStep(event) {
      this.setState({ activeStep: parseInt(event.currentTarget.value, 10) })
    }
  
    render() {
      const steps = ['Beneficiary', 'Bank details', 'Address']
      return (
        <React.Fragment>
          <CssBaseline />
          <Container maxWidth='sm'>
            <Stepper alternativeLabel activeStep={this.state.activeStep}>
              {steps.map((label, index) => (
                <Step key={label}>
                  <StepButton value={index} onClick={this.setStep}>
                    <StepLabel
                      value={index}
                      error={(this.state.activeStep === 3 && index === 2) ? this.props.error : false}
                    >
                      <Translate text={label}/>
                    </StepLabel>
                  </StepButton>
                </Step>
              ))}
            </Stepper>
            <Grid container direction='column'>
              <Body
                {...this.props}
                activeStep={this.state.activeStep}
                handleNext={this.handleNext}
                handleBack={this.handleBack}
                handleReset={this.handleReset}
              />
            </Grid>
            <Grid container direction='row'>
              <ButtonGroup>
                <Footer
                  {...this.props}
                  activeStep={this.state.activeStep}
                  handleNext={this.handleNext}
                  handleBack={this.handleBack}
                  handleReset={this.handleReset}
                />
              </ButtonGroup>
            </Grid>
          </Container>
        </React.Fragment>
      )
    }
  }
  
  
  