'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

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

var Spinner = function Spinner(props) {
  var cx = _bind2.default.bind(_style2.default);
  var loadingClass = props.loading ? _style2.default['loading'] : null;
  var spinnerPosition = props.position ? _style2.default[props.position] : _style2.default['absolute'];
  var spinnerHidden = props.loading ? '' : _style2.default['is-hidden'];
  var spinnerWrap = cx(_style2.default['spinner-wrap'], loadingClass, spinnerPosition, props.optClass, spinnerHidden);
  var spinnerClass = cx(_style2.default[props.type]);

  var getStyle = function getStyle() {
    return props.color ? { backgroundColor: props.color } : null;
  };

  var innerHtml = function innerHtml() {
    if (props.type === 'spinner-dots') {
      return _react2.default.createElement(
        'span',
        null,
        _react2.default.createElement('span', { className: _style2.default.dot1, style: getStyle() }),
        _react2.default.createElement('span', { className: _style2.default.dot2, style: getStyle() })
      );
    }
    return _react2.default.createElement(
      'span',
      null,
      _react2.default.createElement('span', { className: _style2.default.bounce1, style: getStyle() }),
      _react2.default.createElement('span', { className: _style2.default.bounce2, style: getStyle() }),
      _react2.default.createElement('span', { className: _style2.default.bounce3, style: getStyle() })
    );
  };

  return _react2.default.createElement(
    'span',
    { className: spinnerWrap },
    _react2.default.createElement(
      'span',
      { className: spinnerClass },
      innerHtml()
    )
  );
};

Spinner.defaultProps = {
  loading: false
};

Spinner.propTypes = {
  /**
   * Whether the spinner is displayed
   */
  loading: _react2.default.PropTypes.bool,
  /**
   * CSS positioning options for the loader. By default, the spinner will be positioned
   * in the center of any element with relative positioning.
   */
  position: _react2.default.PropTypes.oneOf(['fixed', 'inline']),
  /**
   * The type of loader you want to display.
   */
  type: _react2.default.PropTypes.oneOf(['spinner-dots', 'spinner-bounce']).isRequired,
  /**
   * The hex code of the loader color.
   */
  color: _react2.default.PropTypes.string,
  /**
   * Optional styles to add to the spinner.
   */
  optClass: _react2.default.PropTypes.string
};

exports.default = Spinner;