/* global $ */
/* jshint -W101 */

/**
 * Shows ring overlay
 */
class RingOverlay {
    /**
     * @param callee instance of User class from TokenData.js
     */
    constructor(callee) {
        this._containerId = 'ringOverlay';
        this._audioContainerId = 'ringOverlayRinging';

        this.callee = callee;
        this.render();
        this.audio = document.getElementById(this._audioContainerId);
        this.audio.play();
        this._setAudioTimeout();
    }

    /**
     * Builds and appends the ring overlay to the html document
     */
    _getHtmlStr(callee) {
        return `
            <div id="${this._containerId}" class='ringing' >
                <div class='ringing__content'>
                    <p>Calling...</p>
                    <img class='ringing__avatar' src="${callee.getAvatarUrl()}" />
                    <div class="ringing__caller-info">
                        <p>${callee.getName()}</p>
                    </div>
                </div>
                <audio id="${this._audioContainerId}" src="/sounds/ring.ogg" />
            </div>`;
    }

    /**
     *
     */
    render() {
        this.htmlStr = this._getHtmlStr(this.callee);
        this._attach();
    }

    /**
     * Destroys and clears all the objects (html elements and audio interval)
     * related to the ring overlay.
     */
    destroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }

        this._detach();
    }

    _attach() {
        $("body").append(this.htmlStr);
    }

    _detach() {
        $(`#${this._containerId}`).remove();
    }

    /**
     * Sets the interval that is going to play the ringing sound.
     */
    _setAudioTimeout() {
        this.interval = setInterval( () => {
            this.audio.play();
        }, 5000);
    }
}

/**
 * Store the current ring overlay instance.
 * Note: We want to have only 1 instance at a time.
 */
let overlay = null;

export default {
    /**
     * Shows the ring overlay for the passed callee.
     * @param callee {class User} the callee. Instance of User class from
     * TokenData.js
     */
    show(callee) {
        if(overlay) {
            this.hide();
        }

        overlay = new RingOverlay(callee);
    },

    /**
     * Hides the ring overlay. Destroys all the elements related to the ring
     * overlay.
     */
    hide() {
        if(!overlay) {
            return false;
        }
        overlay.destroy();
        overlay = null;
        return true;
    },

    /**
     * Checks whether or not the ring overlay is currently displayed.
     *
     * @returns {boolean} true if the ring overlay is currently displayed or
     * false otherwise.
     */
    isVisible () {
        return overlay !== null;
    }
};

@@ -280,16 +280,46 @@
 nging';%0A
+        this.isRinging = true;
 %0A       
@@ -502,116 +502,375 @@
     
-%7D%0A%0A    /**%0A     * Builds and appends the ring overlay to the html document%0A     */%0A    _getHtmlStr(callee) %7B
+    this._timeout = setTimeout(() =%3E %7B%0A            this.destroy();%0A            this.render();%0A        %7D, 30000);%0A    %7D%0A%0A    /**%0A     * Builds and appends the ring overlay to the html document%0A     */%0A    _getHtmlStr(callee) %7B%0A        let callingLabel = this.isRinging? %22%3Cp%3ECalling...%3C/p%3E%22 : %22%22;%0A        let callerStateLabel =  this.isRinging? %22%22 : %22 isn't available%22;
 %0A   
@@ -1011,33 +1011,31 @@
         
-%3Cp%3EC
+$%7Bc
 alling
-...%3C/p%3E
+Label%7D
 %0A       
@@ -1211,16 +1211,35 @@
 tName()%7D
+$%7BcallerStateLabel%7D
 %3C/p%3E%0A   
@@ -1674,81 +1674,26 @@
     
-if (
 this.
-interval) %7B%0A            clearInterval(this.interval);%0A        %7D%0A
+_stopAudio();
 %0A   
@@ -1843,32 +1843,250 @@
 emove();%0A    %7D%0A%0A
+    _stopAudio() %7B%0A        this.isRinging = false;%0A        if (this.interval) %7B%0A            clearInterval(this.interval);%0A        %7D%0A        if(this._timeout) %7B%0A            clearTimeout(this._timeout);%0A        %7D%0A    %7D%0A%0A
     /**%0A     * S

Stop ringing after 30s and change the message