import { Component, ChangeDetectionStrategy, ViewChild, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SdTranslateModule } from '@sd-angular/core/translate';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { SdTextarea, SdTextareaModule } from '@sd-angular/core/textarea';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { SdLoadingService } from '@sd-angular/core/loading';
import { SdButtonModule } from '@sd-angular/core/button';
import { SdInputModule } from '@sd-angular/core/input';
import { SdUtilityModule } from '@sd-angular/core/utility';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SdEditorModule } from '@sd-angular/core/editor';
import { SdModalModule } from '@sd-angular/core/modal';

var _items, _send, _timerReload, _load, _scrollToBottom;
class SdComment {
    constructor(loadingService) {
        this.loadingService = loadingService;
        _items.set(this, new BehaviorSubject([]));
        _send.set(this, new BehaviorSubject(''));
        _timerReload.set(this, void 0);
        this.isReloading = false;
        this.fullCommentStyles = {
            'min-height': '150px'
        };
        this.onSend = () => {
            var _a, _b, _c;
            if (this.message) {
                (_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.event) === null || _b === void 0 ? void 0 : _b.onSend(this.message);
                this.message = null;
                (_c = this.textarea) === null || _c === void 0 ? void 0 : _c.focus();
            }
        };
        _load.set(this, () => __awaiter(this, void 0, void 0, function* () {
            const { items } = this.commentOption;
            const results = items();
            if (results instanceof Promise) {
                return yield results;
            }
            return results;
        }));
        this.reload = () => __awaiter(this, void 0, void 0, function* () {
            var _a, _b;
            this.loadingService.start('.c-comment-loading');
            __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
            this.loadingService.stop('.c-comment-loading');
            __classPrivateFieldGet(this, _scrollToBottom).call(this);
            if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
                clearInterval(__classPrivateFieldGet(this, _timerReload));
                __classPrivateFieldSet(this, _timerReload, setInterval(() => __awaiter(this, void 0, void 0, function* () {
                    this.loadingService.start('.c-comment-loading');
                    __classPrivateFieldGet(this, _items).next(yield __classPrivateFieldGet(this, _load).call(this));
                    this.loadingService.stop('.c-comment-loading');
                    __classPrivateFieldGet(this, _scrollToBottom).call(this);
                }), this.commentOption.autoReload.timerMs));
            }
        });
        this.clearAllData = () => {
            this.message = '';
        };
        _scrollToBottom.set(this, () => {
            try {
                setTimeout(() => {
                    this.commentScroll.nativeElement.scrollTop = this.commentScroll.nativeElement.scrollHeight;
                }, 500);
            }
            catch (err) {
            }
        });
    }
    set option(option) {
        this.commentOption = option;
        this.reload();
    }
    ;
    ngOnInit() {
        this.items = __classPrivateFieldGet(this, _items).pipe(map(items => {
            return items.map(e => {
                var _a;
                return (Object.assign(Object.assign({}, e), { picture: (_a = e.picture) !== null && _a !== void 0 ? _a : `https://ui-avatars.com/api/?size=32&rounded=true&background=random&name=${e.creator}` }));
            });
        }));
        this.count = this.items.pipe(map(items => items.length));
    }
    ngOnDestroy() {
        var _a, _b;
        if ((_b = (_a = this.commentOption) === null || _a === void 0 ? void 0 : _a.autoReload) === null || _b === void 0 ? void 0 : _b.timerMs) {
            clearInterval(__classPrivateFieldGet(this, _timerReload));
        }
    }
    ngAfterViewInit() {
    }
}
_items = new WeakMap(), _send = new WeakMap(), _timerReload = new WeakMap(), _load = new WeakMap(), _scrollToBottom = new WeakMap();
SdComment.decorators = [
    { type: Component, args: [{
                selector: 'sd-comment',
                template: "<div class=\"c-container\">\r\n  <div class=\"c-header\">\r\n    <div class=\"c-title\">{{'Comments' | sdTranslate}} <a href=\"javascript:;\">({{count | async}})</a></div>\r\n  </div>\r\n  <div class=\"c-body c-comment-loading\" *ngIf=\"commentOption?.style==='basic'\" #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment\">\r\n          <div class=\"c-info mb-4\">\r\n            {{'By' | sdTranslate}}\r\n            <span class=\"c-creator ml-2\">\r\n              {{item.creator}}\r\n            </span>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <span class=\"mx-4\">\u2022</span>\r\n              <span\r\n                [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy HH:mm'\">{{item.createdDate | sdTimeDifferent:'dd/MM/yyyy HH:mm':'hour' | async}}</span>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-body-style1 c-comment-loading\" *ngIf=\"commentOption?.style==='style1'\" sdScroll #commentScroll>\r\n    <ng-container *ngFor=\"let item of items | async; let i = index\">\r\n      <div class=\"d-flex my-8\">\r\n        <div class=\"c-avatar mr-12\">\r\n          <img height=\"32\" width=\"32px\" [src]=\"item.picture\">\r\n        </div>\r\n        <div class=\"c-comment {{i + 1 === (count | async) ? 'c-comment-border': ''}}\">\r\n          <div class=\"c-info mb-4\">\r\n            <div class=\"c-col-left\">\r\n              <div class=\"c-creator\">\r\n                {{item.creator}}\r\n              </div>\r\n              <div class=\"c-email\">\r\n                {{item.email}}\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"item.createdDate\">\r\n              <div class=\"c-col-right\"\r\n                   [matTooltip]=\"item.createdDate | date:'dd/MM/yyyy H:mm'\">{{item.createdDate | date:'dd/MM/yyyy H:mm'}}</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"c-content\" [innerHtml]=\"item.content\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"c-footer p-16\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 c-position-relative\">\r\n        <ng-container *ngIf=\"commentOption?.editor?.enabled else noUseEditor\">\r\n          <div class=\"mb-8\">\r\n            <sd-editor [(model)]=\"message\" [styles]=\"commentOption?.editor?.styles\"\r\n                       [toolbar]=\"commentOption?.editor?.toolbar\"\r\n                       [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n                       [hashTagValues]=\"commentOption?.editor?.hashTagValues\" [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n          </div>\r\n          <div *ngIf=\"commentOption?.fullComment?.enabled\" class=\"c-full-comment-backdrop\"\r\n               (click)=\"modalFullComment.open()\"></div>\r\n        </ng-container>\r\n        <ng-template #noUseEditor>\r\n          <sd-textarea [(model)]=\"message\" rows=\"1\" autoHeight></sd-textarea>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-button class=\"float-right\" title=\"G\u1EEDi\" (action)=\"onSend()\" [disabled]=\"!message\" color=\"primary\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n        <sd-button class=\"float-right mr-8\" title=\"T\u1EA3i l\u1EA1i\"  (action)=\"reload()\" *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n                   size=\"sm\">\r\n        </sd-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sd-modal [title]=\"'Comments' | sdTranslate\" width=\"sm\" [closeClickOutSide]=\"commentOption?.fullComment?.closeClickOutSide\" #modalFullComment>\r\n  <sd-modal-body>\r\n    <sd-editor [(model)]=\"message\" [styles]=\"fullCommentStyles\"\r\n               [toolbar]=\"commentOption?.editor?.toolbar\"\r\n               [mentionValues]=\"commentOption?.editor?.mentionValues\"\r\n               [hashTagValues]=\"commentOption?.editor?.hashTagValues\"\r\n               [args]=\"commentOption?.editor?.args\"></sd-editor>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"ml-8\" title=\"X\u00F3a to\u00E0n b\u1ED9\" size=\"sm\" type=\"link\"\r\n               (action)=\"clearAllData()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"!commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"\u0110\u00F3ng\" size=\"sm\" (action)=\"modalFullComment.close()\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n    <sd-button class=\"ml-8\" title=\"T\u1EA3i l\u1EA1i\" (action)=\"reload()\"  *ngIf=\"commentOption?.autoReload?.enabledButton\" color=\"warning\" type=\"fill\"\r\n               size=\"sm\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"commentOption?.fullComment?.enableSendButton\" class=\"ml-8\" title=\"G\u1EEDi\" size=\"sm\" (action)=\"onSend();modalFullComment.close();\" [disabled]=\"!message\"\r\n               color=\"primary\" type=\"fill\">\r\n    </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".text-black400{color:#757575}.c-container{display:flex;flex-direction:column;height:100%}.c-container .c-header{align-items:center;background-color:#fff;display:flex;height:40px;padding:0 16px}.c-container .c-header .c-title{font-weight:500}.c-container .c-body{background:#f8f9fa;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body:hover{overflow-y:auto}.c-container .c-body .c-comment{background:#fff;border:1px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;padding:12px 16px;white-space:pre-wrap;word-break:break-word}.c-container .c-body .c-comment .c-info{color:#757575}.c-container .c-body .c-comment .c-info .c-creator{color:#000;font-weight:500}.c-container .c-body-style1{background:#fff;flex:1;overflow-y:hidden;padding:16px}.c-container .c-body-style1 .c-comment{background:#fff;border-bottom:3px solid #f2f2f2;border-radius:4px;flex:1;overflow-wrap:break-word;white-space:pre-wrap;word-break:break-word}.c-container .c-body-style1 .c-comment .c-info{color:#757575}.c-container .c-body-style1 .c-comment .c-info .c-creator{color:#000;font-weight:500;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-email{color:#000;font-weight:400;white-space:nowrap}.c-container .c-body-style1 .c-comment .c-info .c-col-left{display:inline-block;overflow:hidden;vertical-align:top;width:calc(100% - 128px)}.c-container .c-body-style1 .c-comment .c-info .c-col-right{display:inline-block;margin-left:8px;width:120px}.c-container .c-body-style1 .c-comment-border{border-bottom:none}.c-container .c-footer{background:#fff;min-height:120px}.c-container .c-footer .c-position-relative{position:relative}.c-container .c-footer .c-full-comment-backdrop{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}"]
            },] }
];
SdComment.ctorParameters = () => [
    { type: SdLoadingService }
];
SdComment.propDecorators = {
    commentScroll: [{ type: ViewChild, args: ['commentScroll',] }],
    textarea: [{ type: ViewChild, args: [SdTextarea,] }],
    option: [{ type: Input }]
};

class SdCommentModule {
}
SdCommentModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatButtonModule,
                    MatIconModule,
                    MatTooltipModule,
                    SdTranslateModule,
                    SdButtonModule,
                    SdInputModule,
                    SdTextareaModule,
                    SdEditorModule,
                    SdUtilityModule,
                    SdModalModule
                ],
                declarations: [
                    SdComment
                ],
                exports: [
                    SdComment
                ],
                providers: []
            },] }
];

/*
 * Public API Surface of superdev-angular-core
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SdComment, SdCommentModule };
//# sourceMappingURL=sd-angular-core-comment.js.map
