import { Component, Input, Output, EventEmitter } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../../core/credentials.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/flex-layout/flex";
import * as i5 from "@angular/flex-layout/extended";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/form-field";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/material/input";
import * as i10 from "../../read-more/read-more.component";
export class CommentFormComponent {
    set commentData(data) {
        this.view = !!data;
        this._commentData = data;
        this.commentFormGroup.patchValue(data);
    }
    constructor(fb, credentialService) {
        this.fb = fb;
        this.credentialService = credentialService;
        this.action = new EventEmitter();
        this.createForm();
    }
    ngOnInit() { }
    get isLoggedIn() {
        return this.credentialService.isAuthenticated;
    }
    get currentUser() {
        return this.credentialService.credentials.user;
    }
    createForm() {
        //TODO: Finialize and add more validations.
        this.commentFormGroup = this.fb.group({
            id: [""],
            note: [""],
            model_type: [""],
            related_model_id: [""],
        });
    }
    submit() {
        if (this.commentFormGroup.get("note").value) {
            if (this._commentData) {
                this.view = !this.view;
            }
            this.action.emit({ type: "save", value: this.commentFormGroup.value });
            this.commentFormGroup.reset();
        }
        else if (this.commentFormGroup.get("id").value) {
            this.deleteComment();
        }
    }
    hideEdit() {
        if (this.commentFormGroup.get("id").value) {
            this.view = !this.view;
        }
    }
    editComment() {
        this.view = !this.view;
        this.commentFormGroup.patchValue(this._commentData);
    }
    deleteComment() {
        this.action.emit({ type: "delete", value: this.commentFormGroup.value });
    }
    ngOnDestroy() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFormComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.CredentialsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentFormComponent, selector: "app-comment-form", inputs: { commentData: "commentData" }, outputs: { action: "action" }, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFormComponent, decorators: [{
            type: Component,
            args: [{ selector: "app-comment-form", template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.CredentialsService }], propDecorators: { commentData: [{
                type: Input
            }], action: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 