/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Actions, ofType } from '@ngrx/effects';
import { merge } from 'rxjs';
import { ChatService } from '../chat.service';
import { ChatActionTypes } from '../ngrx/actions';
export class ChatPanelComponent {
    /**
     * @param {?} chatService
     * @param {?} actions
     */
    constructor(chatService, actions) {
        this.chatService = chatService;
        this.actions = actions;
        this.resetForm();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.subscription = merge(this.chatService.selectedChannel$, this.actions.pipe(ofType(ChatActionTypes.INCOMING_MESSAGE))).subscribe(() => {
            setTimeout(() => {
                if (this.chat) {
                    this.chat.nativeElement.scrollTop = this.chat.nativeElement.scrollHeight;
                }
            }, 10);
        });
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    /**
     * @param {?} form
     * @param {?} channel
     * @return {?}
     */
    submit(form, channel) {
        this.chatService.send(form.message, channel);
        this.resetForm();
    }
    /**
     * @return {?}
     */
    resetForm() {
        this.form = { message: '' };
    }
}
ChatPanelComponent.decorators = [
    { type: Component, args: [{
                selector: 'bidi-chat-panel',
                template: "<div *ngIf=\"chatService.selectedChannel$ | async as channel\" class=\"chat-panel is-flex has-column-direction\">\n  <div class=\"chat-conversation-header\">\n    <div class=\"is-ff-light has-text-light is-size-7 is-relative is-uppercase\" >\n      <svg\n        (click)=\"chatService.selectGroup(null); chatService.selectChannel(null)\"\n        class=\"icon-svg-tt-cancel is-small is-pulled-right\"\n        style=\"cursor: pointer;height: 1em; width: 1em;\">\n        <use xlink:href=\"#icon-svg-tt-cancel\"></use>\n      </svg>\n      <p class=\"mobile-title\">{{ channel.groupName }}</p>\n      <p class=\"is-size-7 desk-title-with-margin\">{{ channel.name }}</p>\n    </div>\n  </div>\n  <div class=\"chat is-grow-1\" #chat>\n    <nav class=\"panel-chat\">\n      <div class=\"chat-active\">\n        <div\n          *ngFor=\"let message of channel.history\"\n          class=\"message\"\n          [ngClass]=\"{ mine: message.mine }\"\n        >\n          <div *ngIf=\"message.from\" class=\"message-body\">\n            <div>\n              <p\n                *ngIf=\"!message.mine\"\n                class=\"message-sender is-size-7 is-pulled-left is-ff-bold\"\n              >\n                {{ message.from.split('@')[0] }}\n              </p>\n\n              <div style=\"clear:both;\">\n                <p class=\"is-size-7\">{{ message.body }}</p>\n                <p class=\"is-size-8 is-pulled-right\"\n                   style=\"opacity: 0.5;\">\n                  {{ message.timestamp | date: 'HH:mm' }}hs\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </nav>\n  </div>\n  <div class=\"chat-footer\">\n    <div class=\"panel-block-chat\">\n      <form (ngSubmit)=\"submit(form, channel)\" autocomplete=\"off\">\n        <div class=\"field\">\n          <div class=\"control has-icons-right\">\n            <input [(ngModel)]=\"form.message\" class=\"input\" type=\"text\" name=\"message\" placeholder=\"Mensaje\">\n            <span class=\"icon is-small is-right\">\n                <svg class=\"icon-svg-tt-plus icon has-text-dark\">\n                  <use xlink:href=\"#icon-svg-tt-plus\"></use>\n                </svg>\n            </span>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n",
                styles: ["form{padding:0}.chat-panel{height:calc(100vh - 35px);padding:25px;background:rgba(30,54,72,.95);width:400px}@media screen and (max-width:680px){.chat-panel{width:auto}}.chat-panel .chat-conversation-header{padding-bottom:15px}.chat-panel .chat{background:#fff;padding:30px;overflow:auto;height:calc(100vh - 150px)}.chat-panel .chat .message{background-color:transparent}.chat-panel .chat .message .message-body{text-align:left;display:inline-block;width:54%;background-color:#f5f5f5;border-radius:10px;border-width:0;padding:11px}.chat-panel .chat .message.mine{text-align:right}.chat-panel .chat .message.mine .message-body{background:#0cf;color:#fff}.chat-panel .chat .message-sender{color:#0cf}.chat-footer{padding:1px 15px;background:#e5e5e5}.chat-footer input{border-radius:20px;margin-bottom:0}.chat-footer svg{height:1em;width:1em;margin-top:.7em}@media (min-width:610px){.mobile-title{display:none}.desk-title-with-margin{padding-top:61px}}"]
            }] }
];
/** @nocollapse */
ChatPanelComponent.ctorParameters = () => [
    { type: ChatService },
    { type: Actions }
];
ChatPanelComponent.propDecorators = {
    chat: [{ type: ViewChild, args: ['chat',] }]
};
if (false) {
    /** @type {?} */
    ChatPanelComponent.prototype.chat;
    /** @type {?} */
    ChatPanelComponent.prototype.form;
    /**
     * @type {?}
     * @private
     */
    ChatPanelComponent.prototype.subscription;
    /** @type {?} */
    ChatPanelComponent.prototype.chatService;
    /**
     * @type {?}
     * @private
     */
    ChatPanelComponent.prototype.actions;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYmlkaS9jb21tb24tY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9tb2R1bGVzL2NoYXQvY2hhdC1wYW5lbC9jaGF0LXBhbmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQXFCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTdCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFPbEQsTUFBTSxPQUFPLGtCQUFrQjs7Ozs7SUFTN0IsWUFBb0IsV0FBd0IsRUFBVSxPQUFnQjtRQUFsRCxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUFVLFlBQU8sR0FBUCxPQUFPLENBQVM7UUFDcEUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQ3ZCLElBQUksQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLEVBQ2pDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUM1RCxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDZixVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksSUFBSSxDQUFDLElBQUksRUFBRTtvQkFDYixJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDO2lCQUMxRTtZQUNILENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUNULENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ2xDLENBQUM7Ozs7OztJQUVELE1BQU0sQ0FBRSxJQUFJLEVBQUUsT0FBZ0I7UUFDNUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQzs7OztJQUVELFNBQVM7UUFDUCxJQUFJLENBQUMsSUFBSSxHQUFHLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDO0lBQzlCLENBQUM7OztZQTFDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsMHhFQUEwQzs7YUFFM0M7Ozs7WUFQUSxXQUFXO1lBSFgsT0FBTzs7O21CQVliLFNBQVMsU0FBQyxNQUFNOzs7O0lBQWpCLGtDQUFvQzs7SUFFcEMsa0NBRUU7Ozs7O0lBRUYsMENBQXFCOztJQUVSLHlDQUErQjs7Ozs7SUFBRSxxQ0FBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIE9uRGVzdHJveSwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFjdGlvbnMsIG9mVHlwZSB9IGZyb20gJ0BuZ3J4L2VmZmVjdHMnO1xuaW1wb3J0IHsgbWVyZ2UgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IENoYW5uZWwgfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMnO1xuaW1wb3J0IHsgQ2hhdFNlcnZpY2UgfSBmcm9tICcuLi9jaGF0LnNlcnZpY2UnO1xuaW1wb3J0IHsgQ2hhdEFjdGlvblR5cGVzIH0gZnJvbSAnLi4vbmdyeC9hY3Rpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlkaS1jaGF0LXBhbmVsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NoYXQtcGFuZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGF0LXBhbmVsLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2hhdFBhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBAVmlld0NoaWxkKCdjaGF0JykgY2hhdDogRWxlbWVudFJlZjtcblxuICBmb3JtOiB7XG4gICAgbWVzc2FnZTogc3RyaW5nO1xuICB9O1xuXG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yIChwdWJsaWMgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlLCBwcml2YXRlIGFjdGlvbnM6IEFjdGlvbnMpIHtcbiAgICB0aGlzLnJlc2V0Rm9ybSgpO1xuICB9XG5cbiAgbmdPbkluaXQgKCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gbWVyZ2UoXG4gICAgICB0aGlzLmNoYXRTZXJ2aWNlLnNlbGVjdGVkQ2hhbm5lbCQsXG4gICAgICB0aGlzLmFjdGlvbnMucGlwZShvZlR5cGUoQ2hhdEFjdGlvblR5cGVzLklOQ09NSU5HX01FU1NBR0UpKVxuICAgICkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAodGhpcy5jaGF0KSB7XG4gICAgICAgICAgdGhpcy5jaGF0Lm5hdGl2ZUVsZW1lbnQuc2Nyb2xsVG9wID0gdGhpcy5jaGF0Lm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xuICAgICAgICB9XG4gICAgICB9LCAxMCk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSAoKSB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIHN1Ym1pdCAoZm9ybSwgY2hhbm5lbDogQ2hhbm5lbCkge1xuICAgIHRoaXMuY2hhdFNlcnZpY2Uuc2VuZChmb3JtLm1lc3NhZ2UsIGNoYW5uZWwpO1xuICAgIHRoaXMucmVzZXRGb3JtKCk7XG4gIH1cblxuICByZXNldEZvcm0gKCkge1xuICAgIHRoaXMuZm9ybSA9IHsgbWVzc2FnZTogJycgfTtcbiAgfVxufVxuIl19