'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');

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

var Wrapper = _styledComponents2.default.div.withConfig({
  displayName: 'Toast__Wrapper'
})(['height:65px;width:100%;background-color:', ';@media(min-width:768px){width:500px;}'], function (props) {
  return props.theme['white'];
});
var Container = _styledComponents2.default.div.withConfig({
  displayName: 'Toast__Container'
})(['position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:100%;padding:15px 10px 15px 25px;box-sizing:border-box;background:', ';color:', ';font-family:\'Montserrat\',sans-serif;font-size:14px;font-weight:400;border-top:6px solid ', ';box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;'], function (props) {
  return (0, _polished.transparentize)(0.9, props.theme[props.color]);
}, function (props) {
  return props.theme[props.color];
}, function (props) {
  return (0, _polished.transparentize)(0.8, props.theme[props.color]);
});
var Content = _styledComponents2.default.div.withConfig({
  displayName: 'Toast__Content'
})(['display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:100%;margin-right:10px;box-sizing:border-box;& >:first-child{text-transform:uppercase;}@media(min-width:768px){& >:first-child{display:none;}}']);
var Close = (0, _styledComponents2.default)(_Icons.Icon).withConfig({
  displayName: 'Toast__Close'
})(['&:hover{color:', '!important;}'], function (props) {
  return (0, _polished.darken)(0.2, props.theme[props.color]);
});

var selectColor = function selectColor(type) {
  switch (type) {
    case 'success':
      return 'success';
    case 'error':
      return 'error';
    case 'info':
      return 'brand-secondary';
    default:
      return 'brand-secondary';
  }
};

var Toast = function Toast(props) {
  var nature = props.nature,
      onClose = props.onClose,
      children = props.children;

  var color = selectColor(nature);

  return _react2.default.createElement(
    Wrapper,
    null,
    _react2.default.createElement(
      Container,
      { color: color },
      _react2.default.createElement(
        Content,
        null,
        children
      ),
      _react2.default.createElement(Close, { name: 'close', size: '20px', weight: 300, color: color, cursor: true, onClick: onClose })
    )
  );
};

Toast.propTypes = {
  nature: _propTypes2.default.oneOf(['success', 'error', 'info']),
  onClose: _propTypes2.default.func.isRequired,
  children: _propTypes2.default.node.isRequired
};

Toast.defaultProps = {
  nature: 'info'
};

exports.default = Toast;