import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommentsUiActions } from '../../../../state/ui/comments/comments.actions';
import { CommentsDialogs } from './../../functions/comments.dialogs';
import * as i0 from "@angular/core";
import * as i1 from "../../../smz-dialogs/services/smz-dialogs.service";
import * as i2 from "@ngxs/store";
import * as i3 from "@angular/common";
import * as i4 from "primeng/api";
import * as i5 from "primeng/tree";
import * as i6 from "../../../smz-messages/components/icon-message/icon-message.component";
import * as i7 from "../../../../common/data-pipes/pipes/safe-html.pipe";
import * as i8 from "../../../../common/data-pipes/pipes/safe-url.pipe";
import * as i9 from "../../../../common/data-pipes/pipes/simple-calendar.pipe";
export class SmzCommentsComponent {
    // public users: string[] = ['john.doe', 'jane.doe', 'jim.beam'];
    constructor(cdf, dialogs, store) {
        this.cdf = cdf;
        this.dialogs = dialogs;
        this.store = store;
        this.data = [];
    }
    showCreateDialog(parent) {
        this.dialogs.open({
            presetId: "SimpleCrud" /* SmzPresets.SimpleCrud */,
            title: 'Novo Comentário',
            features: [CommentsDialogs.getComment(this.state.focus)],
            callbacks: {
                onConfirm: (data) => {
                    const comment = data.comment;
                    const creation = {
                        entityId: this.state.entityId,
                        parentId: parent?.key,
                        comment: comment.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/<br><br>/mg, '<br>')
                    };
                    this.store.dispatch(new CommentsUiActions.Create(creation));
                }
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzCommentsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SmzDialogsService }, { token: i2.Store }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: SmzCommentsComponent, selector: "smz-comments", inputs: { state: "state", data: "data" }, ngImport: i0, template: `
  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
  <ng-container *ngIf="data.length > 0; else elseEmpty">
    <p-tree [value]="data">
        <ng-template let-node pTemplate="default">

          <!-- CONTAINER -->
          <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">

              <!-- AVATAR -->
              <img class="w-20" [src]="node.data.avatar | safeUrl"/>

              <!-- CONTENT -->
              <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">

                  <!-- NAME AND DATE -->
                  <div class="grid grid-nogutter items-center justify-start gap-2">

                      <!-- DISPLAY NAME -->
                      <div class="font-bold leading-4">{{ node.data.displayName }}</div>

                      <!-- DATE -->
                      <div class="text-xs pt-px">{{ node.data.date | simpleCalendar : 'fromNow' }}</div>
                  </div>

                  <!-- MESSAGE -->
                  <div [innerHTML]="node.label | safeHtml"></div>

                  <!-- ACTIONS -->
                  <a *ngIf="state.response.enabled" class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
              </div>

          </div>
        </ng-template>
    </p-tree>
  </ng-container>

  <ng-template #elseEmpty>
    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
  </ng-template>
`, isInline: true, styles: ["smz-comments .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{box-shadow:unset!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "component", type: i6.SmzIconMessageComponent, selector: "smz-icon-message", inputs: ["icon", "message", "comment"] }, { kind: "pipe", type: i7.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i8.SafeUrlPipe, name: "safeUrl" }, { kind: "pipe", type: i9.SimpleCalendarPipe, name: "simpleCalendar" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzCommentsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-comments', template: `
  <!-- <mentionable-textarea [users]="users" class="w-full"></mentionable-textarea> -->
  <ng-container *ngIf="data.length > 0; else elseEmpty">
    <p-tree [value]="data">
        <ng-template let-node pTemplate="default">

          <!-- CONTAINER -->
          <div class="grid grid-nogutter items-start justify-start flex-nowrap gap-3 mb-3 py-1">

              <!-- AVATAR -->
              <img class="w-20" [src]="node.data.avatar | safeUrl"/>

              <!-- CONTENT -->
              <div class="col grid grid-nogutter flex-col items-start justify-start gap-2">

                  <!-- NAME AND DATE -->
                  <div class="grid grid-nogutter items-center justify-start gap-2">

                      <!-- DISPLAY NAME -->
                      <div class="font-bold leading-4">{{ node.data.displayName }}</div>

                      <!-- DATE -->
                      <div class="text-xs pt-px">{{ node.data.date | simpleCalendar : 'fromNow' }}</div>
                  </div>

                  <!-- MESSAGE -->
                  <div [innerHTML]="node.label | safeHtml"></div>

                  <!-- ACTIONS -->
                  <a *ngIf="state.response.enabled" class="cursor-pointer text-sm" (click)="showCreateDialog(node)">{{ state.locale.answser }}</a>
              </div>

          </div>
        </ng-template>
    </p-tree>
  </ng-container>

  <ng-template #elseEmpty>
    <smz-icon-message [icon]="'far fa-comment'" [message]="state.locale.emptyMessage" [comment]="state.locale.firstMessage"></smz-icon-message>
  </ng-template>
`, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, styles: ["smz-comments .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{box-shadow:unset!important}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SmzDialogsService }, { type: i2.Store }], propDecorators: { state: [{
                type: Input
            }], data: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 