<!--

    Copyright © 2016-2026 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments flex flex-col">
  <div class="header" [class.activity-only]="alarmActivityOnly">
    <div class="header-container flex flex-row items-center justify-between"
         [class.asc]="isDirectionAscending()"
         [class.activity-only]="alarmActivityOnly">
      <span class="header-title" translate>
        alarm-activity.activity
      </span>
      <div style="margin-left: auto">
        <button mat-icon-button
                type="button"
                (click)="exportAlarmActivity()"
                matTooltip="{{ 'alarm-activity.export' | translate }}"
                matTooltipPosition="above">
          <mat-icon class="material-icons" svgIcon="mdi:file-export"></mat-icon>
        </button>
        <button mat-icon-button
                type="button"
                (click)="changeSortDirection()"
                [matTooltip]="getSortDirectionTooltipText()"
                matTooltipPosition="above">
          <tb-icon class="material-icons">{{ getSortDirectionIcon() }}</tb-icon>
        </button>
        <button mat-icon-button
                type="button"
                (click)="loadAlarmComments()"
                matTooltip="{{ 'alarm-activity.refresh' | translate }}"
                matTooltipPosition="above">
          <mat-icon class="material-icons">refresh</mat-icon>
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-col">
    @if (!isDirectionAscending()) {
      <ng-container *ngTemplateOutlet="commentInput"></ng-container>
    }
    <div class="comments-container flex flex-col gap-3" style="padding: 24px"
         [class.asc]="isDirectionAscending()"
         [class.activity-only]="alarmActivityOnly">
      @for (displayDataElement of displayData; track displayDataElement; let i = $index) {
        <div class="flex-1">
          @if (displayDataElement.isSystemComment) {
            <div class="system-comment">
              <span class="system-text" style="margin-right: 8px">
                {{ displayDataElement.commentText }}
              </span>
              <span class="time" style="padding: 3px"
                    [matTooltip]="displayDataElement.createdTime"
                    matTooltipPosition="right">
                {{ displayDataElement.createdDateAgo }}
              </span>
            </div>
          } @else {
            @if (!displayDataElement.edit) {
              <div class="user-comment flex flex-row items-center justify-start gap-2"
                   (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                   (mouseleave)="onCommentMouseLeave(i)">
                @if (displayDataElement.userExists) {
                  <div
                    class="user-avatar flex flex-row items-center justify-center self-start xs:!hidden"
                    [style.background-color]="displayDataElement.avatarBgColor">
                    {{ getUserInitials(displayDataElement.displayName) }}
                  </div>
                } @else {
                  <mat-icon class="mat-icon tb-mat-28 xs:!hidden">no_accounts</mat-icon>
                }
                <div class="flex flex-1 flex-col" style="gap: 5px">
                  <div class="flex flex-row items-center justify-start gap-2">
                    <span class="user-name">{{ displayDataElement.displayName }}</span>
                    <span class="time"
                          [matTooltip]="displayDataElement.createdTime"
                          matTooltipPosition="right">
                      {{ displayDataElement.createdDateAgo }}
                    </span>
                    @if (displayDataElement.isEdited) {
                      <span class="time"
                            matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime }}"
                            matTooltipPosition="right">
                        Edited
                      </span>
                    }
                  </div>
                  <span class="text">{{ displayDataElement.commentText }}</span>
                </div>
                <div class="action-buttons flex flex-row xs:flex-col"
                     [class.show-buttons]="displayDataElement.showActions">
                  <button mat-icon-button
                          type="button"
                          (click)="editComment(displayDataElement.commentId)">
                    <mat-icon class="material-icons">edit</mat-icon>
                  </button>
                  <button mat-icon-button
                          type="button"
                          (click)="deleteComment(displayDataElement.commentId)">
                    <mat-icon class="material-icons">delete</mat-icon>
                  </button>
                </div>
              </div>
            } @else {
              <div class="flex flex-row items-center justify-start gap-2">
                <div class="user-avatar flex flex-row items-center justify-center"
                     [style.background-color]="displayDataElement.avatarBgColor">
                  {{ getUserInitials(displayDataElement.displayName) }}
                </div>
                <mat-form-field class="mat-block tb-appearance-transparent flex-1">
                  <textarea matInput
                            type="text"
                            placeholder="{{ 'alarm-activity.add' | translate }}"
                            cdkTextareaAutosize
                            cdkAutosizeMinRows="1"
                            cols="1"
                            formControlName="alarmCommentEdit"
                            (keyup.enter)="saveEditedComment(displayDataElement.commentId)"
                            (keydown.enter)="$event.preventDefault()">
                  </textarea>
                  <div matSuffix class="flex flex-row">
                    <button mat-icon-button
                            (click)="cancelEdit(displayDataElement.commentId)"
                            type="button">
                      <mat-icon class="material-icons red-button">close</mat-icon>
                    </button>
                    <button mat-icon-button
                            type="button"
                            (click)="saveEditedComment(displayDataElement.commentId)">
                      <mat-icon class="material-icons green-button">check</mat-icon>
                    </button>
                  </div>
                </mat-form-field>
              </div>
            }
          }
        </div>
      }
    </div>
    @if (isDirectionAscending()) {
      <ng-container *ngTemplateOutlet="commentInput"></ng-container>
    }
  </div>
  <ng-template #commentInput>
    <div style="background-color: white" class="comment-input"
         [class.newest-first]="!isDirectionAscending()"
         [class.oldest-first]="isDirectionAscending()"
         [class.activity-only]="alarmActivityOnly">
      <div class="inner-wrap flex flex-row items-center justify-start gap-2">
        @if (userDisplayName$ | async; as userDisplayName) {
          <div class="user-avatar flex flex-row items-center justify-center"
               [style.background-color]="getCurrentUserBgColor(userDisplayName)">
            {{ getUserInitials(userDisplayName) }}
          </div>
        }
        <mat-form-field class="mat-block tb-appearance-transparent flex-1">
          <textarea matInput
                    type="text"
                    placeholder="{{ 'alarm-activity.add' | translate }}"
                    cdkTextareaAutosize
                    cdkAutosizeMinRows="1"
                    cols="1"
                    formControlName="alarmComment"
                    (keyup.enter)="saveComment()"
                    (keydown.enter)="$event.preventDefault()">
          </textarea>
          @if (getAlarmCommentValue()) {
            <button mat-icon-button
                    type="button"
                    matSuffix
                    (click)="saveComment()">
              <mat-icon color="primary">
                send
              </mat-icon>
            </button>
          }
        </mat-form-field>
      </div>
    </div>
  </ng-template>
</div>
