'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 _polished = require('polished');

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

var _Text = require('../Text');

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

var Container = _styledComponents2.default.div.withConfig({
  displayName: 'Banner__Container'
})(['display:flex;flex-direction:row;align-items:center;background:', ';border:1px solid ', ';border-radius:4px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:', ';margin-left:', ';padding:', ';& > span:first-child{margin-right:', '};'], function (props) {
  return (0, _polished.transparentize)(0.9, props.theme[props.color]);
}, function (props) {
  return (0, _polished.transparentize)(0.8, props.theme[props.color]);
}, function (props) {
  return props.width ? props.width : 'initial';
}, function (props) {
  return props.inline && !props.label ? '5px' : '0px';
}, function (props) {
  return props.inline || props.label ? '3px 5px' : '5px 10px';
}, function (props) {
  return props.inline ? '3px' : '5px';
});

var BannerContent = (0, _styledComponents2.default)(_Text.Text).withConfig({
  displayName: 'Banner__BannerContent'
})(['display:flex;flex-direction:row;white-space:', ';& a:last-of-type{margin-left:5px;}'], function (props) {
  return props.inline ? 'nowrap' : 'initial';
});

var selectStyle = function selectStyle(type) {
  switch (type) {
    case 'success':
      return { color: 'success', uppercase: false, icon: 'checkmark-in-circle' };
    case 'warning':
      return { color: 'error', uppercase: true, icon: 'alert' };
    case 'alert':
      return { color: 'brand-secondary', uppercase: false, icon: 'bell' };
    case 'caution':
      return { color: 'brand-yellow', uppercase: false, icon: 'alert' };
    case 'informational':
      return { color: 'gray-5', uppercase: false, icon: null };
    default:
      return { color: 'brand-secondary', uppercase: false, icon: null };
  }
};

var Banner = function Banner(props) {
  var type = props.type,
      children = props.children,
      inline = props.inline,
      label = props.label,
      width = props.width;

  var style = selectStyle(type);
  var color = style.color,
      uppercase = style.uppercase,
      icon = style.icon;


  return _react2.default.createElement(
    Container,
    { color: color, width: width, inline: inline, label: label },
    icon && _react2.default.createElement(_Icons.Icon, { name: icon, size: '18px', weight: 700, color: color }),
    _react2.default.createElement(
      BannerContent,
      { size: '12px', weight: 400, color: color, uppercase: uppercase, inline: inline },
      children
    )
  );
};

Banner.propTypes = {
  type: _propTypes2.default.oneOf(['success', 'warning', 'alert', 'caution', 'informational']),
  children: _propTypes2.default.node.isRequired,
  width: _propTypes2.default.string
};

exports.default = Banner;