goog.module('grrUi.stats.auditChartDirective');
goog.module.declareLegacyNamespace();

const {stripTypeInfo} = goog.require('grrUi.core.apiService');
const {upperCaseToTitleCase} = goog.require('grrUi.core.utils');



/**
 * Controller for AuditChartDirective.
 * @unrestricted
 */
const AuditChartController = class {
  /**
   * @param {!angular.Scope} $scope
   * @param {!angular.jQuery} $element
   * @ngInject
   */
  constructor($scope, $element) {
    /** @private {!angular.Scope} */
    this.scope_ = $scope;

    /** @private {!angular.jQuery} */
    this.element_ = $element;

    /** @type {Array<string>|undefined} */
    this.auditUsedFields;

    /** @type {Array<string>|undefined} */
    this.auditTitleCaseUsedFields;

    /** @type {Array<Array<string>>|undefined} */
    this.typedAuditRows;

    /** @type {string} */
    this.errorMsg = '';

    this.scope_.$watch('typedData', function(typedData) {
      if (angular.isDefined(typedData) &&
          angular.isDefined(typedData['value'])) {
        this.initAuditChart_(typedData['value']['audit_chart']);
      }
    }.bind(this));
  }

  /**
   * Initializes an audit chart.
   *
   * @param {Object} typedAuditChartData The data to be displayed, with type
   *                                     annotations.
   * @private
   */
  initAuditChart_(typedAuditChartData) {
    var auditChartData = stripTypeInfo(typedAuditChartData);

    this.auditUsedFields = undefined;
    this.auditTitleCaseUsedFields = undefined;
    this.typedAuditRows = undefined;

    if (angular.isUndefined(auditChartData['rows']) ||
        auditChartData['rows'].length == 0 ||
        angular.isUndefined(auditChartData['used_fields']) ||
        auditChartData['used_fields'].length == 0) {
      this.errorMsg = 'No data to display.';
      return;
    }

    this.auditUsedFields = auditChartData['used_fields'];
    this.auditTitleCaseUsedFields =
        auditChartData['used_fields'].map(upperCaseToTitleCase);
    this.typedAuditRows = typedAuditChartData['value']['rows'];
  }
};



/**
 * AuditChartDirective definition.
 *
 * @return {angular.Directive} Directive definition object.
 */
exports.AuditChartDirective = function() {
  return {
    scope: {typedData: '='},
    restrict: 'E',
    templateUrl: '/static/angular-components/stats/audit-chart.html',
    controller: AuditChartController,
    controllerAs: 'controller'
  };
};


/**
 * Name of the directive in Angular.
 *
 * @const
 * @export
 */
exports.AuditChartDirective.directive_name = 'grrAuditChart';
