/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, Input } from '@angular/core';
import { Store } from '@ngrx/store';
import { format } from 'date-fns';
import { map, tap } from 'rxjs/operators';
import { NotificationService } from '../notification.service';
import { ReadNotifications } from '../ngrx/actions';
var NotificationsComponent = /** @class */ (function () {
    function NotificationsComponent(notificationService, store) {
        this.notificationService = notificationService;
        this.store = store;
        this.reading = false;
        this.format = 'DD/MM/YY H:mm';
    }
    /**
     * @return {?}
     */
    NotificationsComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.notifications$ = this.notificationService.list$.pipe(tap(function () { return _this.readIfReading(); }), map(function (_a) {
            var _b = tslib_1.__read(_a), notifications = _b.slice(0);
            return notifications
                .reverse()
                .filter(function (notification) { return notification.persistent; })
                .map(function (notification) { return (tslib_1.__assign({}, notification, { formattedDate: format(new Date(notification.timestamp), _this.format) })); });
        }));
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    NotificationsComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        this.readIfReading();
    };
    /**
     * @return {?}
     */
    NotificationsComponent.prototype.readIfReading = /**
     * @return {?}
     */
    function () {
        if (this.reading) {
            this.store.dispatch(new ReadNotifications());
        }
    };
    NotificationsComponent.decorators = [
        { type: Component, args: [{
                    selector: 'bidi-notifications',
                    template: "<div class=\"is-flex has-column-direction\">\n  <h2 class=\"has-text-light is-uppercase is-size-6\">Notificaciones</h2>\n  <div class=\"notification-list flex-1\">\n    <div\n      *ngFor=\"let notification of notifications$ | async\"\n      class=\"card\"\n      [ngClass]=\"{\n        'has-text-info': notification.type === 'info',\n        'has-text-success': notification.type === 'success',\n        'has-text-warning': notification.type === 'warning',\n        'has-text-danger': notification.type === 'error',\n        'has-text-white': ['info', 'success', 'error'].includes(notification.type)\n      }\"\n    >\n      <header class=\"card-header\">\n        <div class=\"has-text-right\">\n          <span class=\"has-text-grey-light is-size-7\">\n            {{ notification.formattedDate }}\n          </span>\n        </div>\n      </header>\n      <div class=\"card-content\">\n        <p class=\"has-text-white\">{{ notification.text }}</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
                    styles: [":host>div{width:340px;background:rgba(30,54,72,.95);height:calc(100vh - 35px)}:host>div h2{padding:25px}.notification-list{overflow-y:auto}.notification-list .card{margin:10px;border-left:2px solid;border-bottom:1px solid rgba(255,255,255,.2);background:0 0;box-shadow:none}.notification-list .card .card-content{padding:0 1rem .5rem}.card-header{display:block;box-shadow:none}.card-content{padding:0 1rem 1rem}"]
                }] }
    ];
    /** @nocollapse */
    NotificationsComponent.ctorParameters = function () { return [
        { type: NotificationService },
        { type: Store }
    ]; };
    NotificationsComponent.propDecorators = {
        reading: [{ type: Input }],
        format: [{ type: Input }]
    };
    return NotificationsComponent;
}());
export { NotificationsComponent };
if (false) {
    /** @type {?} */
    NotificationsComponent.prototype.reading;
    /** @type {?} */
    NotificationsComponent.prototype.format;
    /** @type {?} */
    NotificationsComponent.prototype.notifications$;
    /**
     * @type {?}
     * @private
     */
    NotificationsComponent.prototype.notificationService;
    /**
     * @type {?}
     * @private
     */
    NotificationsComponent.prototype.store;
}
//# sourceMappingURL=data:application/json;base64, 