/**
 * @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';
var ChatPanelComponent = /** @class */ (function () {
    function ChatPanelComponent(chatService, actions) {
        this.chatService = chatService;
        this.actions = actions;
        this.resetForm();
    }
    /**
     * @return {?}
     */
    ChatPanelComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.subscription = merge(this.chatService.selectedChannel$, this.actions.pipe(ofType(ChatActionTypes.INCOMING_MESSAGE))).subscribe(function () {
            setTimeout(function () {
                if (_this.chat) {
                    _this.chat.nativeElement.scrollTop = _this.chat.nativeElement.scrollHeight;
                }
            }, 10);
        });
    };
    /**
     * @return {?}
     */
    ChatPanelComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.subscription.unsubscribe();
    };
    /**
     * @param {?} form
     * @param {?} channel
     * @return {?}
     */
    ChatPanelComponent.prototype.submit = /**
     * @param {?} form
     * @param {?} channel
     * @return {?}
     */
    function (form, channel) {
        this.chatService.send(form.message, channel);
        this.resetForm();
    };
    /**
     * @return {?}
     */
    ChatPanelComponent.prototype.resetForm = /**
     * @return {?}
     */
    function () {
        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 = function () { return [
        { type: ChatService },
        { type: Actions }
    ]; };
    ChatPanelComponent.propDecorators = {
        chat: [{ type: ViewChild, args: ['chat',] }]
    };
    return ChatPanelComponent;
}());
export { ChatPanelComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYmlkaS9jb21tb24tY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImxpYi9tb2R1bGVzL2NoYXQvY2hhdC1wYW5lbC9jaGF0LXBhbmVsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQXFCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTdCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFbEQ7SUFjRSw0QkFBb0IsV0FBd0IsRUFBVSxPQUFnQjtRQUFsRCxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUFVLFlBQU8sR0FBUCxPQUFPLENBQVM7UUFDcEUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7Ozs7SUFFRCxxQ0FBUTs7O0lBQVI7UUFBQSxpQkFXQztRQVZDLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUN2QixJQUFJLENBQUMsV0FBVyxDQUFDLGdCQUFnQixFQUNqQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsZUFBZSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FDNUQsQ0FBQyxTQUFTLENBQUM7WUFDVixVQUFVLENBQUM7Z0JBQ1QsSUFBSSxLQUFJLENBQUMsSUFBSSxFQUFFO29CQUNiLEtBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLFNBQVMsR0FBRyxLQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUM7aUJBQzFFO1lBQ0gsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ1QsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzs7O0lBRUQsd0NBQVc7OztJQUFYO1FBQ0UsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNsQyxDQUFDOzs7Ozs7SUFFRCxtQ0FBTTs7Ozs7SUFBTixVQUFRLElBQUksRUFBRSxPQUFnQjtRQUM1QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDOzs7O0lBRUQsc0NBQVM7OztJQUFUO1FBQ0UsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQztJQUM5QixDQUFDOztnQkExQ0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLDB4RUFBMEM7O2lCQUUzQzs7OztnQkFQUSxXQUFXO2dCQUhYLE9BQU87Ozt1QkFZYixTQUFTLFNBQUMsTUFBTTs7SUFxQ25CLHlCQUFDO0NBQUEsQUEzQ0QsSUEyQ0M7U0F0Q1ksa0JBQWtCOzs7SUFDN0Isa0NBQW9DOztJQUVwQyxrQ0FFRTs7Ozs7SUFFRiwwQ0FBcUI7O0lBRVIseUNBQStCOzs7OztJQUFFLHFDQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgT25EZXN0cm95LCBPbkluaXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWN0aW9ucywgb2ZUeXBlIH0gZnJvbSAnQG5ncngvZWZmZWN0cyc7XG5pbXBvcnQgeyBtZXJnZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQ2hhbm5lbCB9IGZyb20gJy4uLy4uLy4uL21vZGVscyc7XG5pbXBvcnQgeyBDaGF0U2VydmljZSB9IGZyb20gJy4uL2NoYXQuc2VydmljZSc7XG5pbXBvcnQgeyBDaGF0QWN0aW9uVHlwZXMgfSBmcm9tICcuLi9uZ3J4L2FjdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdiaWRpLWNoYXQtcGFuZWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1wYW5lbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NoYXQtcGFuZWwuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDaGF0UGFuZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBWaWV3Q2hpbGQoJ2NoYXQnKSBjaGF0OiBFbGVtZW50UmVmO1xuXG4gIGZvcm06IHtcbiAgICBtZXNzYWdlOiBzdHJpbmc7XG4gIH07XG5cbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IgKHB1YmxpYyBjaGF0U2VydmljZTogQ2hhdFNlcnZpY2UsIHByaXZhdGUgYWN0aW9uczogQWN0aW9ucykge1xuICAgIHRoaXMucmVzZXRGb3JtKCk7XG4gIH1cblxuICBuZ09uSW5pdCAoKSB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24gPSBtZXJnZShcbiAgICAgIHRoaXMuY2hhdFNlcnZpY2Uuc2VsZWN0ZWRDaGFubmVsJCxcbiAgICAgIHRoaXMuYWN0aW9ucy5waXBlKG9mVHlwZShDaGF0QWN0aW9uVHlwZXMuSU5DT01JTkdfTUVTU0FHRSkpXG4gICAgKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLmNoYXQpIHtcbiAgICAgICAgICB0aGlzLmNoYXQubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLmNoYXQubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQ7XG4gICAgICAgIH1cbiAgICAgIH0sIDEwKTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95ICgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgc3VibWl0IChmb3JtLCBjaGFubmVsOiBDaGFubmVsKSB7XG4gICAgdGhpcy5jaGF0U2VydmljZS5zZW5kKGZvcm0ubWVzc2FnZSwgY2hhbm5lbCk7XG4gICAgdGhpcy5yZXNldEZvcm0oKTtcbiAgfVxuXG4gIHJlc2V0Rm9ybSAoKSB7XG4gICAgdGhpcy5mb3JtID0geyBtZXNzYWdlOiAnJyB9O1xuICB9XG59XG4iXX0=