/** @module Messages */

/**
 * a generic message that can be displayed in the {@link Messages} box
 */
class Message {
    /**
     * @param {string} text               text of the message
     * @param {Function} [onHide] a function that will be called when the `hide()` method is called
     */
    constructor(text, onHide) {
        this.$el = $('<div>')
            .addClass('message')
            .text(text);

        /**
         * callback function that will be called when the `hide()` method is called
         * @type {Function}
         */
        this.onHide = onHide;
    }

    /**
     * hide the message (and call the onHide callback if there is any)
     */
    hide() {
        this.$el.remove();

        if (this.onHide) {
            this.onHide();
        }
    }
}

/**
 * a loading message that can be displayed in the {@link Messages} box
 * @extends Message
 */
class LoadingMessage extends Message {
    constructor(text, onHide = undefined) {
        super(text, onHide);

        this.$el.addClass('loading');
    }
}

/**
 * a message that has a close button and that can be displayed in the {@link Messages} box
 * @extends Message
 */
class ClosableMessage extends Message {
    constructor(text, onHide = undefined) {
        super(text, onHide);

        this.$el.append(
            $('<span>')
                .addClass('close')
                .click(() => {
                    this.hide();
                })
        );
    }
}

/**
 * an error message that can be displayed in the {@link Messages} box
 * @extends ClosableMessage
 */
class ErrorMessage extends ClosableMessage {
    constructor(text, onHide = undefined) {
        super(text, onHide);

        this.$el.addClass('error');
    }
}

/**
 * a warning message that can be displayed in the {@link Messages} box
 * @extends ClosableMessage
 */
class WarningMessage extends ClosableMessage {
    constructor(text, onHide = undefined) {
        super(text, onHide);

        this.$el.addClass('warning');
    }
}

/**
 * display messages to the user in a nice UI
 */
export default class Messages {
    constructor() {
        /**
         * jQuery element that represents the message interface. This element contains all the currently displayed messages.
         * @type {jQuery.element}
         */
        this.$el = $('<div>').addClass('messages');

        /**
         * number of currently displayed messages, has a specified setter and getter
         * @type {number}
         */
        this.count = 0;

        // place the progress info element
        $('body').append(this.$el);
    }

    /**
     * get the number of currently displayed messages
     * @return {number} [description]
     */
    get count() {
        return this.messageCount;
    }

    /**
     * Set the number of currently displayed messages. Should be called only through functions that add messages.
     *
     * If the message count is >= 1, the jQuery element for the UI is displayed, if the message count is <1, the UI is hidden.
     * @param  {number} value [description]
     * @return {number}       [description]
     */
    set count(value) {
        this.messageCount = value;

        if (this.messageCount < 1) {
            this.hide();
        } else {
            this.display();
        }
    }

    /**
     * hide the message box by adding a `hidden` class to the element
     */
    hide() {
        this.$el.addClass('hidden');
    }

    /**
     * display the message box by removing the `hidden` class to the element
     */
    display() {
        this.$el.removeClass('hidden');
    }

    /**
     * add a new message to the message box
     * @param  {string} text             text of the message
     * @param  {Message} [constr=Message] constructor of the message, must be a derivate of the {@link Message} class
     * @return {Message}                  the newly constructed message (instance made by the specified constructor)
     */
    newMessage(text, constr = Message) {
        // Create the message by calling the constructor,
        // provide it with text and a callback function that will be called when hiding the message.
        // This callback subtracts 1 from the
        let message = new constr(text, () => {
            this.count--;
        });

        this.$el.append(message.$el);
        this.count++;

        return message;
    }

    /**
     * create a new loading message and add it to the message box
     * @param  {string} text text of the message
     * @return {LoadingMessage} the newly constructed {@link LoadingMessage}
     */
    newLoadingMessage(text) {
        return this.newMessage(text, LoadingMessage);
    }

    /**
     * create a new error message and add it to the message box
     * @param  {string} text text of the message
     * @return {ErrorMessage} the newly constructed {@link ErrorMessage}
     */
    newErrorMessage(text) {
        return this.newMessage(text, ErrorMessage);
    }

    /**
     * create a new warning message and add it to the message box
     * @param  {string} text text of the message
     * @return {WarningMessage} the newly constructed {@link WarningMessage}
     */
    newWarningMessage(text) {
        return this.newMessage(text, WarningMessage);
    }
}