class Typewriter extends React.Component {
  constructor(props){
    super(props);
    this.myDiv = null;
    this.mySound = null;
    this.typewriter = element => {
      this.myDiv = element;
    }; 
    this.setmySound = element => {
      this.mySound = element;
    };

    this.playSound = this.playSound.bind(this);
    this.pauseSound = this.pauseSound.bind(this);
  }

  playSound() {
    if (this.mySound && (this.mySound.duration === 0 || this.mySound.paused)) {
      this.mySound.play();
    }
  } 

  pauseSound() { 
    if(this.mySound){
      this.mySound.pause();
    }
  }

  typeWriter = (s, i=0) => {
    if (this.myDiv && i < s.length) {
      this.myDiv.innerHTML += s.charAt(i);
      i++;
      if(i>5) { 
        this.props.setScroll(); 
      }
      this.playSound();
      setTimeout(() => this.typeWriter(s, i), 40);
    }
    else {
       this.pauseSound();
       if(this.props.nextStep){
        this.props.nextStep();
       } 
    }
  }

  componentDidMount() {
    if(this.myDiv) {
      setTimeout(() => this.typeWriter(this.props.mystring), 200);
    }
  }

  componentWillUnmount() {
    this.pauseSound();
  }

  render() {
    return (
      <div className={this.props.mb}> 
        <audio autoPlay preload="auto" ref={this.setmySound} src="https://freesound.org/data/previews/138/138049_2423928-lq.mp3" type="audio/mpeg" > </audio>
        <span ref={this.typewriter}> </span>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      step: 0
    }
    this.myDiv = null;
    this.instructions = element => {
      this.myDiv = element;
    };
    this.setScroll = this.setScroll.bind(this);
  }

  setScroll() {
    this.myDiv.scrollTo(0, this.myDiv.scrollHeight);
  }
  
  nextStep = () => this.setState({step: this.state.step + 1});

  render(){
    return(
      <div className="wrapper">
        <div className="cs-instructions">
          <div className="cs-instructions-inner" ref={this.instructions}>
            {
              this.state.step === 0
              ? <button onClick={() => {this.nextStep()}}>CLICK TO START THE CASE</button>
              : ''
            }

            {
              this.state.step > 0 
              ? <Typewriter mb={'mb-4'} nextStep={this.nextStep} setScroll={this.setScroll} mystring="****** FLASH ******"></Typewriter>
              : ''
            }

            {
              this.state.step > 1 
              ? <Typewriter mb={'mb-4'} nextStep={this.nextStep} setScroll={this.setScroll} mystring="National treasure stolen from Paris."></Typewriter>
              : ''
            }

            {
              this.state.step > 2 
              ? <Typewriter mb={'mb-0'} nextStep={this.nextStep} setScroll={this.setScroll} mystring="The treasure has been identified as the elevator from the Eiffel Tower."></Typewriter>
              : ''
            }


            {
              this.state.step > 3 
              ? <button className="mb-4" onClick={() => {this.nextStep()}}>Click to continue</button>
              : ''
            }
            {
              this.state.step > 4 
              ? <Typewriter mb={'mb-0'} nextStep={this.nextStep} setScroll={this.setScroll} mystring="Female suspect reported at the scene of the crime. Your assignement: Track the thief from Paris to her hideout and arrested her!"></Typewriter>
               : ''
            }

             {
              this.state.step > 5 
              ? <button className="mb-4" onClick={() => {this.nextStep()}}>Click to continue</button>
              : ''
            }

            {
              this.state.step > 6 
              ? <Typewriter mb={'mb-0'} setScroll={this.setScroll} mystring="You must apprehend the thief by Sunday, 5 pm. Good luck ! "></Typewriter>
               : ''
            }
          </div>
        </div>
        <div className="credits">Typewriter effect realised with ReactJS inspired by Carmen Sandiego 1991 MS-DOS <br/><a href="https://www.julien-verkest.fr/" target="_blank">Julien Verkest ©️ april 2019 </a> </div>
       </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('app'));