define(['i18n', 'lodash', 'ui/component', 'handlebars', 'lib/handlebars/helpers', 'css!ui/dashboard/css/dashboard.css', 'jquery'], function (__, _, component, Handlebars, Helpers0, dashboard_css, $$1) { 'use strict';

    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
    _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
    component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
    Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
    $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;

    if (!Helpers0.__initialized) {
      Helpers0(Handlebars);
      Helpers0.__initialized = true;
    }
    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
      this.compilerInfo = [4,'>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
      var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;


      buffer += "<div class=\"readiness-dashboard-container\">\n    <h3 class=\"dashboard-header\">";
      if (helper = helpers.headerText) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.headerText); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</h3>\n    <section>\n        <div class=\"dashboard-loading\" style=\"display: none;\">\n            <p class=\"dashboard-text\">\n                ";
      if (helper = helpers.loadingText) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.loadingText); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\n            </p>\n        </div>\n        <div class=\"dashboard-metrics_container\"></div>\n        <div class=\"dashboard-warning\" style=\"display: none;\">\n            <p class=\"dashboard-text\">\n                ";
      if (helper = helpers.warningText) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.warningText); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\n            </p>\n        </div>\n    </section>\n</div>\n";
      return buffer;
      });
    function dashboardTpl(data, options, asString) {
      var html = Template(data, options);
      return (asString || true) ? html : $(html);
    }

    if (!Helpers0.__initialized) {
      Helpers0(Handlebars);
      Helpers0.__initialized = true;
    }
    var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
      this.compilerInfo = [4,'>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
      var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression, self=this;

    function program1(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n        <li class=\"dashboard-metric\">\n            <h4 class=\"dashboard-metric_title\">";
      if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</h4>\n            <div class=\"dashboard-metric_score-container\">\n                <div class=\"dashboard-metric_score score-";
      if (helper = helpers.state) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.state); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\" style=\"width: ";
      if (helper = helpers.score) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.score); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "%;\"></div>\n            </div>\n            <ul class=\"dashboard-metric_info\">\n                ";
      stack1 = helpers.each.call(depth0, (depth0 && depth0.info), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n            </ul>\n        </li>\n    ";
      return buffer;
      }
    function program2(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n                    <li class=\"dashboard-metric_info-item\">";
      if (helper = helpers.text) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.text); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</li>\n                ";
      return buffer;
      }

      buffer += "<ul class=\"dashboard-metrics_list ";
      if (helper = helpers.layoutType) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.layoutType); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\">\n    ";
      stack1 = helpers.each.call(depth0, (depth0 && depth0.data), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n</ul>\n";
      return buffer;
      });
    function metricsListTpl(data, options, asString) {
      var html = Template$1(data, options);
      return (asString || true) ? html : $(html);
    }

    /**
     * This program is free software; you can redistribute it and/or
     * modify it under the terms of the GNU General Public License
     * as published by the Free Software Foundation; under version 2
     * of the License (non-upgradable).
     *
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License
     * along with this program; if not, write to the Free Software
     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     *
     * Copyright (c) 2019 (original work) Open Assessment Technologies SA ;
     */
    var defaults = {
      headerText: __('Outlook on the next Synchronization'),
      loadingText: __('Creating report ...'),
      warningText: __('Please contact your system administrator.'),
      loading: false,
      // should display loading screen
      data: [],
      // metricts that should be displayed
      scoreState: {
        // score borders of different metrics states
        error: 32,
        warn: 65
      },
      layoutType: 'tiles'
    };

    /**
     * Dashboard component to display metricts in pass/fail way
     *
     * @param {Object} $container
     * @param {Object} config
     * @param {String} [config.headerText]
     * @param {String} [config.loadingText]
     * @param {String} [config.warningText]
     * @param {Boolean} [config.loading] - should display loading screen
     * @param {string} [config.layoutType] - Type of the component layout. Possible values: 'tiles'|'list'
     * @param {Array} [config.data] - metricts that should be displayed
     * @param {String} data[].title - metric title
     * @param {Number} data[].score - metric score
     * @param {Array} data[].info - array of info labels
     * @returns {readinessDashboard}
     */
    function dashboardFactory(config) {
      var specs = {
        /**
         * Clear dashboard
         */
        clearDashboard: function clearDashboard() {
          this.getElement().find('.dashboard-metrics_container').empty();
          this.toggleWarningMessage(false);
        },
        /**
         * Return metric check state according to it socre
         *
         * @param {Number} socre - metric score
         */
        mapScoreToState: function mapScoreToState(score) {
          var scoreState = this.config.scoreState;
          if (score > scoreState.warn) {
            return 'success';
          } else if (score > scoreState.error) {
            return 'warn';
          }
          return 'error';
        },
        /**
         * Render list of provided metircs
         *
         * @param {Array} data - metrics data
         * @param {String} data[].title - metric title
         * @param {Number} data[].score - metric score
         * @param {Array} data[].info - array of info labels
         */
        renderMetrics: function renderMetrics(data) {
          var $component = this.getElement();
          var $listContainer = $component.find('.dashboard-metrics_container');
          var self = this;
          if (data && data.length) {
            _.forEach(data, function (item) {
              item.state = self.mapScoreToState(item.score);
            });
            this.toggleWarningMessage(_.some(data, function (item) {
              return item.score <= self.config.scoreState.warn;
            }));
            const $metricsList = $$1(metricsListTpl({
              data: data,
              layoutType: self.config.layoutType
            }));
            $listContainer.append($metricsList);
          }
        },
        /**
         * Toggle loading bar
         */
        toggleLoadingBar: function toggleLoadingBar(display) {
          this.getElement().find('.dashboard-loading').toggle(display);
        },
        /**
         * Toggle warning message
         */
        toggleWarningMessage: function toggleWarningMessage(display) {
          this.getElement().find('.dashboard-warning').toggle(display);
        }
      };

      /**
       * @typedef {dashboard}
       */
      return component(specs, defaults).setTemplate(dashboardTpl).on('init', function () {
        this.setState('loading', this.config.loading);
      }).on('render', function () {
        if (!this.is('loading')) {
          this.renderMetrics(this.config.data);
        } else {
          this.toggleLoadingBar(true);
        }
      }).init(config);
    }

    return dashboardFactory;

});
