import React, { Component } from 'react';
import { Utilities } from '../../Utilities/Utilities';


export class CountdownTimer extends Component {


    
      

    constructor(props) {
        super(props);

      

        this.state = {
            timerminutes: 0,
            timerseconds: 0,
            completed:false
        };


        this.incrementer = this.incrementer.bind(this);
      }


    incrementer() {
        console.log('fire!');

        var seconds = this.state.timerseconds;
        var minutes = this.state.timerminutes
        var complete = this.state.completed;

        seconds++;
        if (seconds == 60) {
            seconds = 0;
            minutes++;
        }

        if (minutes == 15) {
            complete = true;
        }

         this.setState({ timerseconds: seconds, timerminutes: minutes, completed: complete});
        
    }

 

    render() {
        
        
        var timer1 = setTimeout(()=>this.incrementer(), 1000);

        if (!this.state.loading) {

            if (this.state.completed) {

                clearTimeout(timer1);
               
              
                return <>
                    <div>
                        <audio className='hidden' ref="audio_tag" src="https://mition.blob.core.windows.net/mition/PRODUCTION/Sounds/ding.mp3" controls autoPlay />
                    </div>
                    <span style={{ color: 'green' }} >15:00:00 completed.  </span><br /> <br /> <p>You can proceed to the next step now.</p>


                </>
            }

            

            return (                
                <div className='countdownTimer'><h3>{this.state.timerminutes} min {this.state.timerseconds} sec </h3></div>
            );

        }
    }


}