import template from './ws-progress-checkmark.html';

ProgressCheckmarkDirective.$inject = ['$log'];

const DEFAULT_COLOR = '#FAB131';
const DEFAULT_BGCOLOR = '#FAF7F5';
const DEFAULT_RADIUS_PX = 20;

/**
 * A simple wrapper directive of the angular-svg-round-progressbar.
 * When the progress has been completed, it shows a checkmark.
 */
export default function ProgressCheckmarkDirective($log) {
  return {
    restrict: 'E',
    template,
    scope: {
      totalSteps: '@',
      completedSteps: '@',
      color: '@',
      bgcolor: '@',
      radius: '@',
    },
    link(scope) {
      scope.color = scope.color || DEFAULT_COLOR;
      scope.bgcolor = scope.bgcolor || DEFAULT_BGCOLOR;
      scope.radius = scope.radius || DEFAULT_RADIUS_PX;
      scope.completionImageStyle = {
        width: `${2 * scope.radius}px`,
        height: `${2 * scope.radius}px`,
        borderRadius: `${scope.radius}px`,
      };

      scope.progressCompleted = () => {
        if (scope.totalSteps <= 0) {
          // Nothing will be rendered.
          $log.warn('Total steps must be greater than 0');
          return undefined;
        }

        return (scope.completedSteps / scope.totalSteps) >= 1;
      };
    },
  };
}
