some

import React, { Component } from 'react';
import * as ROUTES from '../../../constants/routes';


const INITIAL_STATE = {
height: '',
  width: '',
  depth: '',
  noOfShelf:'',
  contact:'',
  comments:'',
  step:1,
  error: null,
};

class Calculator extends Component {
  constructor(props) {
    super(props);

    this.state = { ...INITIAL_STATE };
  }

  onSubmit = event => {
    const { email, password } = this.state;

    this.props.firebase
      .doSignInWithEmailAndPassword(email, password)
      .then(() => {
        this.setState({ ...INITIAL_STATE });
        this.props.history.push(ROUTES.HOME);
      })
      .catch(error => {
        this.setState({ error });
      });

    event.preventDefault();
  };

  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  nextStep=()=>{
    if(this.state.step <3){
      this.setState({step:this.state.step+1})
    }
  }
  prevStep=()=>{
    if(this.state.step >1){
      this.setState({step:this.state.step-1})
    }
  }

  render() {
    const { height, width, depth, error, step, noOfShelf, contact, comments } = this.state;

    const isInvalid = width === '' || height === '' || depth === '' || noOfShelf ==='';

    return (
        <div className="formBoxCenter">
      <form className="text-center border border-light pl-5 pr-5 pt-3 pb-3 formBox" onSubmit={this.onSubmit}>
      
      {step === 1 && 
      <>
      <p className="h4 mb-4">Customize Dimensions</p>
          <input
          name="height"
          value={height}
          onChange={this.onChange}
          type="number"
          min="0"
          placeholder="Height in cm"
          className="form-control mb-4"
        />
         <input
          name="width"
          value={width}
          onChange={this.onChange}
          type="number"
          min="0"
          placeholder="Width in cm"
          className="form-control mb-4"
        />
        <input
          name="depth"
          min="0"
          value={depth}
          onChange={this.onChange}
          type="number"
          placeholder="Depth in cm"
          className="form-control mb-4"
        />
        </>}
        {step === 2 &&<>
        <p className="h4 mb-4">Customize Dimensions</p>
          <input
          name="noOfShelf"
          value={noOfShelf}
          onChange={this.onChange}
          type="number"
          min="1"
          placeholder="No of shelf"
          className="form-control mb-4"
        />
         <input
          name="width"
          value={width}
          onChange={this.onChange}
          type="number"
          min="0"
          placeholder="Width in cm"
          className="form-control mb-4"
        />
        <input
          name="depth"
          min="0"
          value={depth}
          onChange={this.onChange}
          type="number"
          placeholder="Depth in cm"
          className="form-control mb-4"
        />
        </>}
        {step === 3 &&<>
        <p className="h4 mb-4">Customize Dimensions</p>
        <input
          name="contact"
          value={contact}
          onChange={this.onChange}
          type="number"
          min="10"
          placeholder="contact number"
          className="form-control mb-4"
        />
          <input
          name="comments"
          value={comments}
          onChange={this.onChange}
          type="textarea"
           row="5"
          placeholder="Any special request/comment"
          className="form-control mb-4"
        />
         
        </>}
          <div>
  <div className="btn-next-prev">
   {step !== 3 && <button type="button" className="btn btn-danger" id="nextBtn" onClick={this.nextStep}>Next</button>}
    {step !== 1 && <button type="button" className="btn btn-default" id="prevBtn" onClick={this.prevStep}>Previous</button>}
    {step === 3 && <button type="button" className="btn btn-danger" id="submitBtn" onClick={this.nextStep}>Submit</button>}
  </div>
</div>

<div style={{textAlign:'center',marginTop:'40px'}}>
  <span className="step"></span>
  <span className="step"></span>
  <span className="step"></span>
  <span className="step"></span>
</div>
          {error && <p className="text-danger">{error.message}</p>}
      </form>
      </div>
    );
  }
}


export default Calculator;