// Import the core angular services.
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import * as i0 from "@angular/core";
import * as i1 from "../../services/translation-registry.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/cdk/text-field";
import * as i7 from "@angular/material/card";
import * as i8 from "../button/button";
import * as i9 from "../../directives/form.directive";
import * as i10 from "../../directives/scrollbar/scrollbar.directive";
export class QMSComment {
    constructor(trans) {
        this.trans = trans;
        this.updateLog = new EventEmitter();
        this.ngUnsubscribe = new Subject();
    }
    ngOnChanges(changes) {
        // for (const propName in changes) {
        //     const changedProp = changes[propName];
        //     const to = JSON.stringify(changedProp.currentValue);
        //     if (changedProp.isFirstChange()) {
        //     } else {
        //         const from = JSON.stringify(changedProp.previousValue);
        //     }
        // }
        // this.sourceLog = changes.sourceLog.currentValue;
    }
    ngOnInit() {
        this.trans.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.trans.getObjectLang(res);
            }
        });
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
    showContent(content) {
        return content.replace(/(?:\r\n|\r|\n)/g, '<br>');
    }
    editContent(item) {
        item.editedContent = item.content;
        item.isEdit = true;
    }
    saveEditedContent(item) {
        item.content = item.editedContent;
        item.isEdit = false;
        this.updateLog.emit(item);
    }
    removeItem(item) {
        item.isDelete = true;
        this.updateLog.emit(item);
    }
    regretItem(item) {
        item.isDelete = false;
        this.updateLog.emit(item);
    }
    checkInvalidContent(item) {
        return item.editedContent.trim() == '' ? true : false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSComment, deps: [{ token: i1.TranslateLibraryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSComment, selector: "qms-comment", inputs: { sourceLog: "sourceLog", userId: "userId" }, outputs: { updateLog: "updateLog" }, host: { classAttribute: "qms-comment" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\n  <mat-card-header *ngIf=\"!item.isDelete\">\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\n  </mat-card-header>\n  <mat-card-content>\n    <div\n      qms-scrollbar\n      *ngIf=\"!item.isEdit && !item.isDelete\"\n      class=\"content\"\n      [ngClass]=\"{ secondary: userId !== null ? userId === item.userId : 0 !== i % 2   }\"\n      [innerHTML]=\"showContent(item.content)\"\n    ></div>\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\" *ngIf=\"item.isDraft\">\n        {{ LANG.REGRET }}\n      </button>\n    </div>\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\n      <textarea\n        qms-scrollbar\n        class=\"textarea-comment\"\n        matInput\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"1\"\n        cdkAutosizeMaxRows=\"5\"\n        [(ngModel)]=\"item.editedContent\"\n      ></textarea>\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\n  </mat-card-actions>\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\n    <button qms-btn (click)=\"checkInvalidContent(item) || saveEditedContent(item)\" [disabled]=\"checkInvalidContent(item)\">{{ LANG.SAVE }}</button>\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\n      {{ LANG.CANCEL }}\n    </button>\n  </mat-card-actions>\n</div>\n", styles: [".qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-mdc-card-subtitle{font-size:.75rem;color:#0009}.qms-comment .mat-mdc-card-content .content{padding:10px 16px;background-color:#0000000a;display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-mdc-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center;height:56px}.qms-comment .mat-mdc-card-content .content.secondary{background-color:#3e57b71f}.qms-comment .mat-mdc-card-content .qms-form{width:100%}.qms-comment .btn-action{color:var(--primary);font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i7.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "directive", type: i9.QMSFormFieldTextareaDirective, selector: "[qms-form-textarea]" }, { kind: "directive", type: i10.QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSComment, decorators: [{
            type: Component,
            args: [{ selector: 'qms-comment', host: { 'class': 'qms-comment' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\n  <mat-card-header *ngIf=\"!item.isDelete\">\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\n  </mat-card-header>\n  <mat-card-content>\n    <div\n      qms-scrollbar\n      *ngIf=\"!item.isEdit && !item.isDelete\"\n      class=\"content\"\n      [ngClass]=\"{ secondary: userId !== null ? userId === item.userId : 0 !== i % 2   }\"\n      [innerHTML]=\"showContent(item.content)\"\n    ></div>\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\" *ngIf=\"item.isDraft\">\n        {{ LANG.REGRET }}\n      </button>\n    </div>\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\n      <textarea\n        qms-scrollbar\n        class=\"textarea-comment\"\n        matInput\n        cdkTextareaAutosize\n        cdkAutosizeMinRows=\"1\"\n        cdkAutosizeMaxRows=\"5\"\n        [(ngModel)]=\"item.editedContent\"\n      ></textarea>\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\n  </mat-card-actions>\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\n    <button qms-btn (click)=\"checkInvalidContent(item) || saveEditedContent(item)\" [disabled]=\"checkInvalidContent(item)\">{{ LANG.SAVE }}</button>\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\n      {{ LANG.CANCEL }}\n    </button>\n  </mat-card-actions>\n</div>\n", styles: [".qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-mdc-card-subtitle{font-size:.75rem;color:#0009}.qms-comment .mat-mdc-card-content .content{padding:10px 16px;background-color:#0000000a;display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-mdc-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center;height:56px}.qms-comment .mat-mdc-card-content .content.secondary{background-color:#3e57b71f}.qms-comment .mat-mdc-card-content .qms-form{width:100%}.qms-comment .btn-action{color:var(--primary);font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}\n"] }]
        }], ctorParameters: () => [{ type: i1.TranslateLibraryService }], propDecorators: { sourceLog: [{
                type: Input
            }], updateLog: [{
                type: Output
            }], userId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 