import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {

  constructor() {
    super();

    this.state= {
      otpContent: "",
      input: "",
      tempPhone:"123",
      tempPin: "123456",
      errorMsg: ""
    }

    this.handleChange = this.handleChange.bind(this);
    this.handlePhoneSubmit = this.handlePhoneSubmit.bind(this);
    this.handlePinSubmit = this.handlePinSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value});
  }

  phoneInput() {
    this.setState(
      {
        otpContent: <div>
            <input type="text" name="input" onChange={this.handleChange}/>
            <button onClick={this.handlePhoneSubmit}> Dogrula!</button>
        </div>
      }
    );
  }

  handlePhoneSubmit() {
    if(this.state.input === this.state.tempPhone){
      this.setState(
        {
        input: ''
        }
      );
      this.pinInput();

    }
    else {
      this.setState({
        errorMsg: "wrong phone"
      });
    }
  }

  pinInput() {
    this.setState(
      {
        input: '',
        otpContent: (<div>
            <input
 type="text" name="input" onChange={this.handleChange}/>
            <button onClick={this.handlePinSubmit}> Pin Dogrula!</button>
        </div>)
      }
    );
  }

  handlePinSubmit() {
    if(this.state.input === this.state.tempPin){
      this.setSuccess();
    }
    else {
      this.setState({
        errorMsg: "wrong pin"
      });
    }
  }

  setSuccess() {
    this.setState(
      {
        otpContent: (<div>
            <h3>Success!</h3>
        </div>)
      }
    );
  }

  componentDidMount() {
    this.phoneInput();
  }

  render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Hi</h1>
          </header>
          <div className="App-intro">
           {this.state.otpContent}
           {this.state.errorMsg}
          </div>
        </div>
    );
  }
  }
  export default App;