<!--
  ~  Licensed to the Apache Software Foundation (ASF) under one or more
  ~  contributor license agreements.  See the NOTICE file distributed with
  ~  this work for additional information regarding copyright ownership.
  ~  The ASF licenses this file to You 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
    resizable
    (resized)="resized($event)"
    [minHeight]="630"
    [minWidth]="830"
    class="flex flex-col status-history-container">
    <ng-container *ngIf="statusHistoryState$ | async; let statusHistoryState">
        <h2 mat-dialog-title>Status History</h2>
        <div class="status-history flex flex-col grow">
            <mat-dialog-content class="grow flex flex-1">
                <form [formGroup]="statusHistoryForm" class="flex flex-1 h-full">
                    <div class="dialog-content flex w-full flex-1">
                        <div *ngIf="isInitialLoading(statusHistoryState); else loaded" class="flex-1">
                            <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
                        </div>
                        <ng-template #loaded>
                            <ng-container *ngIf="instances.length > 0; else insufficientHistory">
                                <div
                                    *ngIf="componentDetails$ | async; let componentDetails"
                                    class="flex flex-1 w-full gap-x-4">
                                    <div class="component-details flex flex-col gap-y-3">
                                        <ng-container *ngFor="let entry of Object.entries(componentDetails)">
                                            <div *ngIf="entry[0] && entry[1]" class="flex flex-col">
                                                <div>{{ entry[0] }}</div>
                                                <div class="value">{{ entry[1] }}</div>
                                            </div>
                                        </ng-container>
                                        <div class="flex flex-col">
                                            <div>Start</div>
                                            <div class="value">{{ minDate }}</div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div>End</div>
                                            <div class="value">{{ maxDate }}</div>
                                        </div>
                                        <div class="flex flex-col">
                                            <div class="font-bold">NiFi</div>
                                            <div class="detail-item">
                                                <div>Min / Max / Mean</div>
                                                <div class="value">
                                                    {{ clusterStats.min }} / {{ clusterStats.max }} /
                                                    {{ clusterStats.mean }}
                                                </div>
                                            </div>
                                            <div class="legend-entry">
                                                <mat-checkbox
                                                    value="nifi-instance-id"
                                                    (change)="selectNode($event)"
                                                    [checked]="!!instanceVisibility['nifi-instance-id']"></mat-checkbox>
                                                <mat-label>NiFi</mat-label>
                                            </div>
                                        </div>
                                        <div class="flex flex-col" *ngIf="!!nodes && nodes.length > 0">
                                            <div>Nodes</div>
                                            <div>
                                                <div>Min / Max / Mean</div>
                                                <div class="value">
                                                    {{ nodeStats.min }} / {{ nodeStats.max }} / {{ nodeStats.mean }}
                                                </div>
                                            </div>
                                            <!-- TODO display nodes to select from-->
                                            <div class="legend-entry">
                                                <ng-container *ngFor="let node of nodes">
                                                    <mat-checkbox
                                                        [value]="node.id"
                                                        (change)="selectNode($event)"
                                                        [checked]="
                                                            !!instanceVisibility['nifi-instance-id']
                                                        "></mat-checkbox>
                                                    <mat-label>{{ node.label }}</mat-label>
                                                </ng-container>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chart-panel grow flex flex-col">
                                        <div class="selected-descriptor-container" *ngIf="fieldDescriptors$ | async">
                                            <mat-form-field>
                                                <mat-select formControlName="fieldDescriptor">
                                                    <ng-container *ngFor="let descriptor of fieldDescriptors">
                                                        <ng-container
                                                            *ngIf="descriptor.description; else noDescription">
                                                            <mat-option
                                                                [value]="descriptor"
                                                                nifiTooltip
                                                                [tooltipComponentType]="TextTip"
                                                                [tooltipInputData]="getSelectOptionTipData(descriptor)"
                                                                [delayClose]="false">
                                                                <span class="option-text">{{ descriptor.label }}</span>
                                                            </mat-option>
                                                        </ng-container>
                                                        <ng-template #noDescription>
                                                            <mat-option [value]="descriptor">
                                                                <span class="option-text">{{ descriptor.label }}</span>
                                                            </mat-option>
                                                        </ng-template>
                                                    </ng-container>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>
                                        <status-history-chart
                                            [instances]="instances"
                                            [visibleInstances]="instanceVisibility"
                                            [selectedFieldDescriptor]="selectedDescriptor"
                                            (nodeStats)="nodeStatsChanged($event)"
                                            (clusterStats)="clusterStatsChanged($event)"
                                            class="flex flex-1 flex-col">
                                        </status-history-chart>
                                    </div>
                                </div>
                            </ng-container>

                            <ng-template #insufficientHistory>
                                <div class="grow flex items-center justify-center">
                                    Insufficient history, please try again later.
                                </div>
                            </ng-template>
                        </ng-template>
                    </div>
                </form>
            </mat-dialog-content>

            <mat-dialog-actions align="start">
                <div class="flex w-full">
                    <div class="flex-1">
                        <div class="refresh-container flex items-center gap-x-2" *ngIf="instances.length > 0">
                            <button class="nifi-button" (click)="refresh()">
                                <i class="fa fa-refresh" [class.fa-spin]="statusHistoryState.status === 'loading'"></i>
                            </button>
                            <div>Last updated:</div>
                            <div class="refresh-timestamp">{{ statusHistoryState.loadedTimestamp }}</div>
                        </div>
                    </div>

                    <div>
                        <button color="primary" mat-raised-button mat-dialog-close>Close</button>
                    </div>
                </div>
            </mat-dialog-actions>
        </div>
    </ng-container>
</div>
