'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _templateObject = _taggedTemplateLiteral(['\n\tcolor: white;\n  width: 1.06667rem;\n  height: 1.06667rem;\n\t--iron-icon-width: 100%;\n  --iron-icon-height: 100%;\n'], ['\n\tcolor: white;\n  width: 1.06667rem;\n  height: 1.06667rem;\n\t--iron-icon-width: 100%;\n  --iron-icon-height: 100%;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n\tflex: 0 0 auto;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: .33333rem;\n'], ['\n\tflex: 0 0 auto;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-right: .33333rem;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n\tmargin-right: 0;\n\tmargin-left: 1rem;\n\tcursor: pointer;\n'], ['\n\tmargin-right: 0;\n\tmargin-left: 1rem;\n\tcursor: pointer;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n\tflex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  margin-top: 0.66667rem;\n  margin-bottom: 0.66667rem;\n'], ['\n\tflex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  margin-top: 0.66667rem;\n  margin-bottom: 0.66667rem;\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  width: inherit;\n  opacity: 0;\n  height: 0;\n  transition: height .5s ease-in-out, opacity .5s ease-in-out;\n\tbox-sizing: border-box;\n\tfont-size: 1rem;\n\t', '\n\t', '\n\t', '\n\t', '\n\t', '\n\t', '\n\n\t', '\n\n\t', '\n'], ['\n  display: flex;\n  align-items: center;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  width: inherit;\n  opacity: 0;\n  height: 0;\n  transition: height .5s ease-in-out, opacity .5s ease-in-out;\n\tbox-sizing: border-box;\n\tfont-size: 1rem;\n\t', '\n\t', '\n\t', '\n\t', '\n\t', '\n\t', '\n\n\t', '\n\n\t', '\n']),
    _templateObject6 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--error, yellow);\n\t\tcolor: var(--px-alert-label-text-color--error, black);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--error, yellow);\n\t\tcolor: var(--px-alert-label-text-color--error, black);\n  ']),
    _templateObject7 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--important, red);\n  \tcolor: var(--px-alert-label-text-color--important, white);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--important, red);\n  \tcolor: var(--px-alert-label-text-color--important, white);\n  ']),
    _templateObject8 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--warning, orange);\n  \tcolor: var(--px-alert-label-text-color--warning, white);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--warning, orange);\n  \tcolor: var(--px-alert-label-text-color--warning, white);\n  ']),
    _templateObject9 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--information, blue);\n\t\tcolor: var(--px-alert-label-text-color--information, white);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--information, blue);\n\t\tcolor: var(--px-alert-label-text-color--information, white);\n  ']),
    _templateObject10 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--healthy, green);\n\t\tcolor: var(--px-alert-label-text-color--healthy, white);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--healthy, green);\n\t\tcolor: var(--px-alert-label-text-color--healthy, white);\n  ']),
    _templateObject11 = _taggedTemplateLiteral(['\n\t\tbackground-color: var(--px-alert-label-background-color--unknown, gray);\n\t\tcolor: var(--px-alert-label-text-color--unknown, white);\n  '], ['\n\t\tbackground-color: var(--px-alert-label-background-color--unknown, gray);\n\t\tcolor: var(--px-alert-label-text-color--unknown, white);\n  ']),
    _templateObject12 = _taggedTemplateLiteral(['\n\t\topacity: 1;\n  \theight: var(--px-notification-height, 5.33333rem);\n\t\t@media screen and (min-width: 45em) {\n  \t\theight: var(--px-notification-height, 2.66667rem);\n\t\t}\n  '], ['\n\t\topacity: 1;\n  \theight: var(--px-notification-height, 5.33333rem);\n\t\t@media screen and (min-width: 45em) {\n  \t\theight: var(--px-notification-height, 2.66667rem);\n\t\t}\n  ']),
    _templateObject13 = _taggedTemplateLiteral(['\n\t\tfont-size: 0.8rem !important;\n\t\theight: var(--px-notification-height, 2.66667rem) !important;\n\t\t@media screen and (min-width: 45em) {  \n\t \t\theight: var(--px-notification-height, 1.33333rem) !important;\n\t\t}\n\t'], ['\n\t\tfont-size: 0.8rem !important;\n\t\theight: var(--px-notification-height, 2.66667rem) !important;\n\t\t@media screen and (min-width: 45em) {  \n\t \t\theight: var(--px-notification-height, 1.33333rem) !important;\n\t\t}\n\t']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Icon = require('../IconSet/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var NotificationIcon = _styledComponents2.default.div(_templateObject);
var NotificationLeft = _styledComponents2.default.div(_templateObject2);
var NotificationRight = NotificationLeft.extend(_templateObject3);
var NotificationContent = _styledComponents2.default.div(_templateObject4);
var Notification = _styledComponents2.default.div(_templateObject5, function (props) {
	return props.type === 'error' && (0, _styledComponents.css)(_templateObject6);
}, function (props) {
	return props.type === 'important' && (0, _styledComponents.css)(_templateObject7);
}, function (props) {
	return props.type === 'warning' && (0, _styledComponents.css)(_templateObject8);
}, function (props) {
	return props.type === 'info' && (0, _styledComponents.css)(_templateObject9);
}, function (props) {
	return props.type === 'healthy' && (0, _styledComponents.css)(_templateObject10);
}, function (props) {
	return props.type === 'unknown' && (0, _styledComponents.css)(_templateObject11);
}, function (props) {
	return props.opened && (0, _styledComponents.css)(_templateObject12);
}, function (props) {
	return props.small && (0, _styledComponents.css)(_templateObject13);
});

exports.default = function (_ref) {
	var opened = _ref.opened,
	    type = _ref.type,
	    actionIcon = _ref.actionIcon,
	    statusIcon = _ref.statusIcon,
	    slotRight = _ref.slotRight,
	    onClick = _ref.onClick,
	    _ref$small = _ref.small,
	    small = _ref$small === undefined ? false : _ref$small,
	    children = _ref.children;
	return _react2.default.createElement(
		Notification,
		{ opened: opened, type: type, small: small },
		_react2.default.createElement(
			NotificationLeft,
			null,
			_react2.default.createElement(_Icon2.default, { size: 16, icon: statusIcon })
		),
		_react2.default.createElement(
			NotificationContent,
			null,
			children
		),
		_react2.default.createElement(
			NotificationRight,
			null,
			slotRight && slotRight,
			actionIcon && _react2.default.createElement(
				NotificationIcon,
				{ onClick: onClick },
				_react2.default.createElement(_Icon2.default, { size: 16, viewBox: '0 0 22 22', icon: actionIcon })
			)
		)
	);
};