# Source: src/js/views/MetricView.js

    /*global define */
    define(['jquery', 'underscore', 'backbone', 'views/MetricModalView'],
        function($, _, Backbone, MetricModalView) {
        'use strict';

        /**
        * @class MetricView
        * @classdesc the display of the dataset citation and usage metrics on the dataset landing page
        * @classcategory Views
        * @screenshot views/MetricView.png
        * @extends Backbone.View
        */
        var MetricView = Backbone.View.extend(
            /** @lends MetricView.prototype */{

            tagName: 'a',
            // id: 'metrics-button',

            /**
            * Class name to be applied to the metric buttons
            * @type {string}
            */
            className: 'btn metrics',

            /**
            * Attribute to indicate the type of metric
            * @type {string}
            */
            metricName: null,

            /**
            * The Metric Model associated with this view
            * @type {MetricsModel}
            */
            model: null,

            //Templates
            metricButtonTemplate:  _.template( "<span class='metric-icon'> <i class='icon" +
                                " <%=metricIcon%>'></i> </span>" +
                                "<span class='metric-name'> <%=metricName%> </span>" +
                                "<span class='metric-value'> <i class='icon metric-icon icon-spinner icon-spin'>" +
                                "</i> </span>"),

            events: {
                "click" : "showMetricModal",
            },

            /**
            * @param {Object} options - A literal object with options to pass to the view
            * @property {MetricsModel} options.model - The MetricsModel object associated with this view
            * @property {string} options.metricName - The name of the metric view
            * @property {string} options.pid - Associated dataset identifier with this view
            */
            initialize: function(options){
                if((typeof options == "undefined")){
                    var options = {};
                }

                this.metricName = options.metricName;
                this.model = options.model;
                this.pid = options.pid;
            },

            /**
            * Renders the apprpriate metric view on the UI
            */
            render: function () {
                // Generating the Button view for the given metric
                if  (this.metricName == 'Citations') {
                    this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-quote-right', metricName:this.metricName}));
                } else if (this.metricName == 'Downloads') {
                    this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-cloud-download', metricName:this.metricName}));
                } else if (this.metricName == 'Views') {
                    this.$el.html(this.metricButtonTemplate({metricValue:'', metricIcon:'icon-eye-open', metricName:this.metricName}));
                } else {
                    this.$el.html('');
                };

                // Adding tool-tip for the buttons
                // TODO: Change to 'Show metricName', once you've the modals working.
                if (MetacatUI.appModel.get("displayDatasetMetricsTooltip")) {
                    this.$el.addClass("tooltip-this")
                            .attr("data-placement", "top")
                            .attr("data-trigger", "hover")
                            .attr("data-delay", "700")
                            .attr("data-container", "body");
                    if  (this.metricName == 'Citations') {
                        this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was cited.");
                    } else if (this.metricName == 'Downloads') {
                        this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was downloaded.");
                    } else if (this.metricName == 'Views') {
                        this.$el.attr("data-title", "For all the versions of this dataset, the number of times that all or part of this dataset was viewed.");
                    } else {
                        this.$el.attr("data-title", "");
                    }
                };

                // waiting for the fetch() call to succeed.
                this.listenTo(this.model, "sync", this.renderResults);

                // in case when there is an error for the fetch call.
                this.listenTo(this.model, "error", this.renderError);

                return this;
            },

            /**
            * Handles the click functions and displays appropriate modals on click events
            */
            showMetricModal: function(e) {
                if (MetacatUI.appModel.get("displayMetricModals") ) {
                    var modalView = new MetricModalView({metricName: this.metricName, metricsModel: this.model, pid: this.pid});
                    modalView.render();
                    this.modalView = modalView;

                    if( Array.isArray(this.subviews) ){
                      this.subviews.push(modalView);
                    }
                    else{
                      this.subviews = [modalView];
                    }

                    //Send this event to Google Analytics
                    if(MetacatUI.appModel.get("googleAnalyticsKey") && (typeof ga !== "undefined")){
                      ga("send", "event", "metrics", "Click metric", this.metricName);
                    }
                }
            },

            /**
             * Displays the metrics count and badge on the landing page
             */
            renderResults: function() {
                var total = this.model.get("total"+this.metricName);
                // Check if the metric object exists in results obtained from the service
                // If it does, get its total value else set the total count to 0

                // Replacing the metric total count with the spinning icon.

                this.$('.metric-value').text(MetacatUI.appView.numberAbbreviator(total, 1));
                this.$('.metric-value').addClass("badge");

            },

            /**
             * Manages error handling in case Metrics Service does not responsd
             */
            renderError: function() {
                // Replacing the spinning icon with a question-mark
                // when the metrics are not loaded
                var iconEl = this.$('.metric-value').find('.metric-icon');
                iconEl.removeClass('icon-spinner');
                iconEl.removeClass('icon-spin');
                iconEl.addClass("icon-exclamation-sign more-info");

                // Setting the error tool-tip
                this.$el.removeAttr("data-title");

                this.$el.addClass("metrics-button-disabled");
                this.$el.attr("data-title", "The number of " + this.metricName + " could not be retreived at this time.");
            },

            /**
             * Cleans up listeners from this view
             */
            onClose: function(){
              _.each(this.subviews, function(view){
                if( view.onClose ){
                  view.onClose();
                }
              }, this);
            }

        });

        return MetricView;
    });