function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon } from '../';
import t from '../../config/variables';
Button.propTypes = {
  children: PropTypes.string.isRequired,
  onPress: PropTypes.func,
  theme: PropTypes.oneOf(['primary', 'success', 'warning', 'danger', 'info', 'light']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  block: PropTypes.bool,
  disabled: PropTypes.bool,
  loading: PropTypes.bool,
  outline: PropTypes.bool,
  icon: PropTypes.string
};
Button.defaultProps = {
  children: null,
  onPress: null,
  theme: 'primary',
  size: 'medium',
  block: false,
  disabled: false,
  loading: false,
  outline: false,
  icon: null
};
const Btn = styled.button`
  width: ${props => props.block && '100%'};
  display: ${props => props.block ? 'block' : 'inline-block'};
  font-size: ${props => t.fontSizes[props.size]}px;
  font-weight: 500;
  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
  padding: ${props => t.sizeDivisor[props.size] * 3 / 4}px ${props => 3 * t.sizeDivisor[props.size]}px ${props => t.sizeDivisor[props.size] / 2}px;
  color: ${props => () => {
  return props.outline ? t.colorsOutline[props.theme] : t.colors[props.theme];
}};
  background: ${props => () => {
  if (props.disabled) return t.backgrounds.disabled;
  if (props.outline) return t.backgroundsOutline[props.theme];
  return t.backgrounds[props.theme];
}};
  border: 2px solid ${props => () => {
  if (props.disabled) return t.backgrounds.disabled;
  if (props.outline) return t.outlineBorderColors[props.theme];
  return t.borderColors[props.theme];
}};
  border-radius: ${t.base.radiusLarge}px;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

  :hover {
    color: ${props => props.outline ? t.colorsOutlineHover[props.theme] : t.colorsHover[props.theme]};
    background: ${props => () => {
  if (props.disabled) return t.backgrounds.disabled;
  if (props.outline) return t.backgroundsOutlineHover[props.theme];
  return t.backgroundsHover[props.theme];
}};
    border: 2px solid ${props => () => {
  if (props.disabled) return t.backgrounds.disabled;
  if (props.outline) return t.outlineBorderColorsHover[props.theme];
  return t.borderColorsHover[props.theme];
}};
  }

  :active {
    background: ${props => props.outline ? t.backgroundsOutlineActive[props.theme] : t.backgroundsActive[props.theme]};
  }
`;
const IconContainer = styled.span`
  margin-right: 5px;
`;

function Button(props) {
  const icon = props.icon || props.loading && 'spinner';
  return React.createElement(Btn, _extends({}, props, {
    onClick: props.onPress
  }), icon && React.createElement(IconContainer, null, React.createElement(Icon, {
    name: icon,
    spin: props.loading
  })), props.children);
}

export default Button;