'use strict';

$(document).ready(function () {
    $.widget('brf.loadingIndicator', {
        version: '2.0.0',
        widgetEventPrefix: 'loadingIndicator',
        options: {
            customClasses: '',
            message: '',
            template: '',
            delay: 500
        },

        /**
         * Initialize loading indicator widget.
         * @constructor
         */
        _create: function () {
            try {
                var defaultTemplate =
                    '<div id="brf-page-loader-mask" class="loader-fixed bgWhite container-flex-box" style="display: none; z-index:99999999" role="alert" aria-live="polite" aria-busy="true">' +
                    '<svg class="loading-indicator-circle middle-align-self" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" aria-hidden="true">' +
                    '<defs>' +
                    '<linearGradient id="loadingIndicatorGradient1-mask" x1="0" x2="0" y1="10%" y2="90%"><stop offset="0" stop-color="#04569b"></stop><stop offset="1" stop-color="#97b6d2"></stop></linearGradient>' +
                    '<linearGradient id="loadingIndicatorGradient2-mask" x1="0" x2="0" y1="90%" y2="10%"><stop offset="0" stop-color="#97b6d2"></stop><stop offset="1" stop-color="#fff"></stop></linearGradient>' +
                    '</defs>' +
                    '<path fill="url(#loadingIndicatorGradient1-mask)" d="M24 3C12 3 3 12 3 24S12 45 24 45v-4c-10 0-17-8-17-17S15 7 24 7v-4z" />' +
                    '<path fill="url(#loadingIndicatorGradient2-mask)" d="M24 3v4c10 0 17 8 17 17S34 41 24 41v4c12 0 21-10 21-21S36 3 24 3z" />' +
                    '</svg>' +
                    '<div class="loading-indicator-message page-loader-msg middle-align-self"></div>' +
                    '</div>';

                var template = (this.options.template !== '') ? this.options.template : defaultTemplate;

                this.$loadingIndicator = $($.parseHTML(template));

                if (this.options.template === '') {
                    this.$loadingIndicator.addClass(this.options.customClasses);
                    this.$message = this.$loadingIndicator.find('.loading-indicator-message');
                    this._updatemessage();
                }

                this.show();
            } catch (e) {
                console.error("Error creating loading indicator: ", e);
            }
        },

        /**
         * Shows the indicator.
         */
        show: function () {

            var self = this;
            self.element.find('#brf-page-loader-mask').remove();
            setTimeout(function () {
                try {
                    self.element.append(self.$loadingIndicator);
                    self.$loadingIndicator.show();

                    if (self.element.is('body')) {
                        $('.loaderOverlayBackground').remove();
                        $('body').addClass('masked');
                        $('<div class="loaderOverlayBackground transparent"></div>').appendTo('body').fadeIn();
                    }

                } catch (e) {
                    console.error("Error showing the loading indicator: ", e);
                }
            }, self.options.delay);
        },

        /**
         * Hides the indicator.
         */
        hide: function () {
            var self = this;
            try {
                this.$loadingIndicator.removeClass('active');
                setTimeout(function () {
                    try {
                        self.element.find(self.$loadingIndicator).remove();
                        $('body').removeClass('masked');
                        $('.loaderOverlayBackground').remove();
                    } catch (e) {
                        console.error("Error removing loading indicator: ", e);
                    }
                }, self.options.delay);
            } catch (e) {
                console.error("Error hiding the loading indicator: ", e);
            }
        },

        /**
         * Sets an option by name (currently only works for message)
         * @key {string} - option name
         * @value {string} - option value
         */
        _setOption: function (key, value) {
            if (key === 'message') {
                this.options[key] = value;
                this._updatemessage();
            }
        },

        /**
         * Updates the loading indicator's message message
         */
        _updatemessage: function () {
            try {
                if (this.options.message !== '') {
                    this.$message.addClass('active').html(this.options.message);
                    this.$loadingIndicator.removeClass('small-loader');
                } else {
                    this.$message.removeClass('active');
                    this.$loadingIndicator.addClass('small-loader');
                }
            } catch (e) {
                console.error("Error updating message for the loading indicator: ", e);
            }
        }

    });
})