'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepCircle = exports.StepNumber = exports.DoneIcon = exports.AlertIcon = undefined;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _font_icon = require('react-toolbox/lib/font_icon');

var _utils = require('../utils');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

/**
 * An material warning icon to use for steps that needs the
 * users attention.
 */
var AlertIcon = exports.AlertIcon = function AlertIcon(_ref) {
  var _ref$alertColor = _ref.alertColor,
      alertColor = _ref$alertColor === undefined ? _utils.defaultAlertColor : _ref$alertColor;
  return React.createElement(_font_icon.FontIcon, { value: 'warning', style: { color: alertColor } });
};
var circleStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: 'white',
  fontFamily: 'Roboto',
  fontSize: 12
};
/**
 * A material check icon in a circle to use for steps that
 * are completed.
 */
var DoneIcon = exports.DoneIcon = function DoneIcon(_ref2) {
  var _ref2$activeColor = _ref2.activeColor,
      activeColor = _ref2$activeColor === undefined ? _utils.defaultActiveColor : _ref2$activeColor;
  return React.createElement(_utils.Circle, { size: 24, color: activeColor, style: circleStyle }, React.createElement(_font_icon.FontIcon, { value: 'check', style: { fontSize: 14 } }));
};
/**
 * A circle with the step number to use for most steps.
 */
var StepNumber = exports.StepNumber = function StepNumber(_ref3) {
  var step = _ref3.step,
      active = _ref3.active,
      _ref3$activeColor = _ref3.activeColor,
      activeColor = _ref3$activeColor === undefined ? _utils.defaultActiveColor : _ref3$activeColor;
  return React.createElement(_utils.Circle, { size: 24, color: active ? activeColor : 'rgba(0, 0, 0, 0.38)', style: circleStyle }, step);
};
/**
 * Renders the appropriate step icon for the current status.
 */
var StepCircle = exports.StepCircle = function StepCircle(_ref4) {
  var step = _ref4.step,
      _ref4$active = _ref4.active,
      active = _ref4$active === undefined ? true : _ref4$active,
      status = _ref4.status,
      style = _ref4.style,
      activeColor = _ref4.activeColor,
      alertColor = _ref4.alertColor;
  return React.createElement("div", { style: Object.assign({ padding: 8, backgroundColor: 'white' }, style) }, status === 'alert' ? React.createElement(AlertIcon, { alertColor: alertColor }) : status === 'done' ? React.createElement(DoneIcon, { activeColor: activeColor }) : React.createElement(StepNumber, { step: step, active: active, activeColor: activeColor }));
};
//# sourceMappingURL=step-circle.js.map
