'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('../Icon/icons');

var _icons2 = _interopRequireDefault(_icons);

var _SubmitButton = require('./SubmitButton');

var _SubmitButton2 = _interopRequireDefault(_SubmitButton);

var _themeGet = require('../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

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

/**
 * NOTE: all paddings in button are adjusted to accomodate
 * border widths on both sides. If border widths are changed,
 * also change padding to compensate!
 *
 * Vertical paddings are also displaced to accomodate text cap and base lines.
 * Basically, 1px is added to the top, 1px subtracted from the bottom.
 */

var Button = _styledComponents2.default.button.withConfig({
  displayName: 'Button'
})(['font-size:0.8rem;text-decoration:none;font-weight:700;font-family:', ';text-transform:uppercase;border-width:', ';border-style:solid;border-radius:3em;border-color:', ';color:', ';background:', ';padding:12px 28px 10px 28px;display:inline-block;position:relative;overflow:hidden;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;user-select:none;box-sizing:border-box;transition:all 0.25s ease;outline:none;&:hover:not(:disabled),&:focus:not(:disabled){background:', ';border-color:', ';box-shadow:', ';}&:disabled{background:', ';color:', ';border-color:', ';cursor:default;opacity:0.5;}&::before,&::after{position:absolute;height:100%;color:inherit;transition:all 0.3s;speak:none;font-family:', ';}&::before{content:\'', '\';left:-200px;}&::after{content:\'', '\';right:-200px;}&:hover:not(:disabled)::before{left:10px;}&:hover:not(:disabled)::after{right:10px;}'], (0, _themeGet2.default)('fonts.brand'), (0, _themeGet2.default)('thicknesses.normal'), (0, _themeGet2.default)('colors.primary.default'), (0, _themeGet2.default)('colors.text.inverted'), (0, _themeGet2.default)('colors.primary.default'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('shadows.short'), (0, _themeGet2.default)('colors.background.disabled'), (0, _themeGet2.default)('colors.text.disabled'), (0, _themeGet2.default)('colors.background.disabled'), (0, _themeGet2.default)('fonts.icon'), function (_ref) {
  var leftIcon = _ref.leftIcon,
      iconHelper = _ref.iconHelper;
  return iconHelper(leftIcon);
}, function (_ref2) {
  var rightIcon = _ref2.rightIcon,
      iconHelper = _ref2.iconHelper;
  return iconHelper(rightIcon);
});

Button.propTypes = {
  /**
   * An icon name for an icon to pop in from the left side of the button on hover.
   */
  leftIcon: _propTypes2.default.string,
  /**
   * An icon name for an icon to pop in from the right side of the button on hover.
   */
  rightIcon: _propTypes2.default.string,
  /**
   * Use this to override the icon provider function (advanced). An icon provider function takes an icon name and
   * provides a unicode character to render.
   */
  iconHelper: _propTypes2.default.func,
  /**
   * A class name to add to the button element.
   */
  className: _propTypes2.default.string,
  /**
   * An id to add to the button element.
   */
  id: _propTypes2.default.string
};

Button.defaultProps = {
  leftIcon: null,
  rightIcon: null,
  iconHelper: _icons2.default,
  className: null,
  id: null
};

Button.Submit = _SubmitButton2.default;

Button.Secondary = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Secondary'
})(['color:', ';border-color:', ';background:transparent;&:hover:not(:disabled),&:focus:not(:disabled){color:', ';background:', ';border-color:', ';}'], (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.text.inverted'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'));

Button.Small = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Small'
})(['padding:10px 28px 9px 28px;font-size:0.6rem;']);

Button.Large = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Large'
})(['padding:14px 38px 12px 38px;font-size:0.9rem;']);

Button.Danger = (0, _styledComponents2.default)(Button).withConfig({
  displayName: 'Button__Danger'
})(['border-color:', ';background:', ';&:hover:not(:disabled),&:focus:not(:disabled){background:', ';border-color:', ';}'], (0, _themeGet2.default)('colors.negative.default'), (0, _themeGet2.default)('colors.negative.default'), (0, _themeGet2.default)('colors.negative.dark'), (0, _themeGet2.default)('colors.negative.dark'));

/**
 * @component
 */
exports.default = Button;