// Timer.js
export default class Timer extends Component {

    constructor(props){
        // TODO: Ensure props.duration is supplied
        this.state = {
            duration: props.duration;
        }
    }

    stop(){
        if (this.timer){
            clearInterval(this.timer);
        }
    }

    start() {
        // TODO: Check if timer has been already started

        this.timer = setInterval(() => {
            if (this.state.duration > 0) {
                this.setState({
                    duration: duration + (now - Date.now())
                });
            } else {
                this.setState({duration: 0});

                clearInterval(this.timer);

                this.props.onTimeout();
            }
        }, 10);
    }

    render() {
        return <div className="timer">
            <div className="timerInner">Time left: <span>{this.state.duration.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}</span></div>
            </div>
        }
    }

// Beer.js
export default class Beer extends Component {

    loop() {
        ...

        if (direction === 1 && this.state.amount === this.state.maxAmount) {
            this.setState({
                direction: -1
            });

            // Inform that glass has been filled
            this.props.didFill();
        }
        else if (direction === -1) {
            // Report current fill
            this.props.onFillChange(this.state.amount);
        }

        ...
    }
}

// View2a/2b

export default class View2a extends Component {

    constructor(props){
        super(props);
        this.state = {
            duration: (Math.floor(Math.random() * (30 - 10 + 1)) + 10) * 1000, // Random timer number from 10 to 30
            fill: 100
        }
    }

    _onTimeout() {
        this.setState({
            result: "Time's up!";
        });
    }

    _didFill(){
    // this.timer is reference to Timer component
    this.timer.start();
    }

    _onFillChange(fill: number){
        let result;
        if (fill < min) {
            result = "Well Done!";
            this.timer.stop();
        }
        this.setState({
            fill: fill,
            result: result
        });
    }

    render() {
        return(
            <div className="viewContainerBeerScreen">
            <Beer degrees={this.state.degrees} onFillChange={this._onFillChange.bind(this)} didFill={this._didFill.bind(this)}/>
            <Timer duration={this.state.duration} onTimeout={this._onTimeout.bind(this)} ref={(input) => { this.timer = input;}}/>
            <Range onSlideRange={this._onSlideRange.bind(this)}/>
            <Button title="View2a Done" onClick={() => this.props.onClick(this.state.output)}/>
            <div className="result">{this.state.result}</div>
            </div>
            )
    }
}