var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import { connect } from 'react-redux';
import styled from 'react-emotion';
import { Transition } from 'react-spring';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 72px;\n  display: flex;\n  justify-content: center;\n  z-index: 3;\n  left: 0px;\n  right: 0px;\n"], ["\n  position: absolute;\n  top: 72px;\n  display: flex;\n  justify-content: center;\n  z-index: 3;\n  left: 0px;\n  right: 0px;\n"])));
var Bar = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);\n  padding: 12px 24px;\n"], ["\n  background: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);\n  padding: 12px 24px;\n"])));
var NotificationsBar = /** @class */ (function (_super) {
    __extends(NotificationsBar, _super);
    function NotificationsBar() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    NotificationsBar.prototype.render = function () {
        var notifications = Object.values(this.props.notifications);
        return (React.createElement(Transition, { keys: notifications.map(function (_a) {
                var key = _a.key;
                return key;
            }), from: { y: -100 }, enter: { y: 0 }, leave: { y: -100 } }, notifications.map(function (notification) { return function (_a) {
            var y = _a.y;
            return (React.createElement(Container, null,
                React.createElement(Bar, { style: { transform: "translate(0, " + y + "%)" } }, notification.content)));
        }; })));
    };
    return NotificationsBar;
}(React.Component));
var mapDispatchToProps = function (_a) {
    var ui = _a.ui;
    return ({
        notifications: ui.notifications,
    });
};
var mapStateToProps = {};
export default connect(mapDispatchToProps, mapStateToProps)(NotificationsBar);
var templateObject_1, templateObject_2;
//# sourceMappingURL=NotificationsBar.js.map