'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

var _ = _interopRequireWildcard(_lodash);

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; } }

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

/**
 * @category communication
 * @component loader-spinner
 * @variations collab-ui-react
 */

var _ref = _react2.default.createElement(
  'div',
  { className: 'cui-spinner-progress__mask cui-spinner-progress__full' },
  _react2.default.createElement('div', { className: 'cui-spinner-progress__fill' })
);

var _ref2 = _react2.default.createElement(
  'div',
  { className: 'cui-spinner-progress__mask cui-spinner-progress__half' },
  _react2.default.createElement('div', { className: 'cui-spinner-progress__fill' }),
  _react2.default.createElement('div', { className: 'cui-spinner-progress__fill cui-spinner-progress__fix' })
);

var Spinner = function Spinner(props) {
  var size = props.size,
      color = props.color,
      className = props.className,
      percentage = props.percentage,
      showPercentage = props.showPercentage,
      otherHTMLProps = (0, _objectWithoutProperties3.default)(props, ['size', 'color', 'className', 'percentage', 'showPercentage']);


  if (_.isNumber(percentage)) {
    if (size !== 36 && showPercentage) {
      /* eslint-disable no-console */
      console.warn('Percentage will not be shown for sizes smaller than 36');
    }
    return _react2.default.createElement(
      'div',
      (0, _extends3.default)({ className: 'cui-spinner-progress' + ('' + (size && ' cui-spinner-progress--' + size || '')) + ('' + (color && ' cui-spinner-progress--' + color || '')) + ('' + (className && ' ' + className || '')) + (' cui-spinner-progress__percentage-' + _.round(percentage))
      }, otherHTMLProps),
      _react2.default.createElement(
        'div',
        { className: 'cui-spinner-progress__circle' },
        _ref,
        _ref2,
        _react2.default.createElement(
          'div',
          { className: 'cui-spinner-progress__inset-circle' },
          size === 36 && showPercentage && _react2.default.createElement(
            'div',
            { className: 'cui-spinner-progress__percentage' },
            _.round(percentage)
          )
        )
      )
    );
  } else {
    return _react2.default.createElement('i', (0, _extends3.default)({ className: 'cui-spinner' + ('' + (size && ' cui-spinner--' + size || '')) + ('' + (color && ' cui-spinner--' + color || '')) + ('' + (className && ' ' + className || ''))
    }, otherHTMLProps));
  }
};

Spinner.defaultProps = {
  size: 36,
  color: 'black',
  className: '',
  percentage: null,
  showPercentage: false
};

Spinner.displayName = 'Spinner';

exports.default = Spinner;

/**
* @name Spinner
* @description Different states of spinners.
*
* @category communication
* @component loader-spinner
* @section states
*
* @js

import {Spinner} from '@collab-ui/react';

export default function Default() {
  return (
    <div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner</code></h3>
        <Spinner />
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner size:20</code></h3>
        <Spinner size={20}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner size:28</code></h3>
        <Spinner size={28}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner size:36</code></h3>
        <Spinner size={36}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner color:blue</code></h3>
        <Spinner color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner color:blue size:20</code></h3>
        <Spinner size={20} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner color:blue size:28</code></h3>
        <Spinner size={28} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner color:blue size:36</code></h3>
        <Spinner size={36} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner</code></h3>
        <Spinner />
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner size:20</code></h3>
        <Spinner size={20}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner size:28</code></h3>
        <Spinner size={28}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner size:36</code></h3>
        <Spinner size={36}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner with progress size:16</code></h3>
        <Spinner size={16} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner with progress size:20</code></h3>
        <Spinner size={20} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner with progress size:28</code></h3>
        <Spinner size={28} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner with progress size:36</code></h3>
        <Spinner size={36} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Default <code className="small">Spinner with progress without percentage size:36</code></h3>
        <Spinner size={36} percentage={65} showPercentage={false}/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner with progress color:blue size:16</code></h3>
        <Spinner size={16} percentage={65} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner with progress color:blue size:20</code></h3>
        <Spinner size={20} percentage={65} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner with progress color:blue size:28</code></h3>
        <Spinner size={28} percentage={65} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner with progress color:blue size:36</code></h3>
        <Spinner size={36} percentage={65} color='blue'/>
      </div>
      <div className="docui-example docui-example--spacing">
        <h3>Blue <code className="small">Spinner with progress without percentage color:blue size:36</code></h3>
        <Spinner size={36} percentage={65} color='blue' showPercentage={false}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner with progress size:16</code></h3>
        <Spinner size={16} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner with progress size:20</code></h3>
        <Spinner size={20} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner with progress size:28</code></h3>
        <Spinner size={28} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner with progress size:36</code></h3>
        <Spinner size={36} percentage={65}/>
      </div>
      <div className="docui-example docui-example--spacing cui--dark docs-example--dark">
        <h3>Dark <code className="small">Spinner with progress without percentage size:36</code></h3>
        <Spinner size={36} percentage={65} showPercentage={false}/>
      </div>
    </div>
  );
}

**/

module.exports = exports['default'];