'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Icons = require('../Icons');

var _Colors = require('../Colors');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Empty = _styledComponents2.default.div.withConfig({
  displayName: 'SecurityGauge__Empty'
})(['height:13px;width:13px;border:1px solid red;border-radius:50%;margin-right:5px;']);
var Progress = _styledComponents2.default.div.withConfig({
  displayName: 'SecurityGauge__Progress'
})(['display:flex;flex-direction:row;justify-content:space-around;width:60px;padding-left:5px;']);
var SecurityIcon = (0, _styledComponents2.default)(_Icons.Icon).withConfig({
  displayName: 'SecurityGauge__SecurityIcon'
})(['border-radius:50%;background:', ';height:16px;width:15px;color:white;cursor:inherit;margin-right:5px;'], (0, _Colors.Color)('success'));

var SecurityGauge = function SecurityGauge(props) {
  var score = props.score;

  var hide = score === 3;

  if (hide) return null;
  return _react2.default.createElement(
    Progress,
    null,
    score >= 1 ? _react2.default.createElement(SecurityIcon, { name: 'checkmark-in-circle', size: '16px' }) : _react2.default.createElement(Empty, null),
    score >= 2 ? _react2.default.createElement(SecurityIcon, { name: 'checkmark-in-circle', size: '16px' }) : _react2.default.createElement(Empty, null),
    score === 3 ? _react2.default.createElement(SecurityIcon, { name: 'checkmark-in-circle', size: '16px' }) : _react2.default.createElement(Empty, null)
  );
};

SecurityGauge.propTypes = {
  score: _propTypes2.default.oneOf([0, 1, 2, 3]).isRequired
};

SecurityGauge.defaultProps = {
  score: 0
};

exports.default = SecurityGauge;