<!--
  ~ 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.
  -->

<h2 mat-dialog-title>Enable Controller Service</h2>
<ng-container *ngIf="(controllerService$ | async)! as controllerService">
    <form
        class="controller-service-enable-form"
        [formGroup]="enableControllerServiceForm"
        *ngIf="(enableRequest$ | async)! as enableRequest">
        <ng-container *ngIf="enableRequest.currentStep === SetEnableStep.Pending; else enableInProgress">
            <mat-dialog-content>
                <div class="tab-content py-4 flex gap-x-4">
                    <div class="w-96 flex flex-col gap-y-4">
                        <div class="flex flex-col">
                            <div>Service</div>
                            <div class="value">{{ controllerService.component.name }}</div>
                        </div>
                        <div>
                            <mat-form-field>
                                <mat-label>Scope</mat-label>
                                <mat-select formControlName="scope">
                                    <mat-option
                                        *ngFor="let option of controllerServiceActionScopes"
                                        [value]="option.value"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        [tooltipInputData]="getSelectOptionTipData(option)"
                                        [delayClose]="false">
                                        {{ option.text }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </div>
                    <div class="w-96 flex flex-col">
                        <div>Referencing Components</div>
                        <div>
                            <controller-service-references
                                [serviceReferences]="controllerService.component.referencingComponents"
                                [goToReferencingComponent]="goToReferencingComponent"></controller-service-references>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
            <mat-dialog-actions align="end">
                <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
                <button
                    [disabled]="enableControllerServiceForm.invalid"
                    type="button"
                    color="primary"
                    (click)="submitForm()"
                    mat-raised-button>
                    Enable
                </button>
            </mat-dialog-actions>
        </ng-container>
        <ng-template #enableInProgress>
            <mat-dialog-content>
                <div class="tab-content py-4 flex gap-x-4">
                    <div class="w-96 flex flex-col gap-y-4">
                        <div class="flex flex-col">
                            <div>Service</div>
                            <div class="value">{{ controllerService.component.name }}</div>
                        </div>
                        <div class="flex flex-col">
                            <div>Steps To Disable {{ controllerService.component.name }}</div>
                            <div class="flex flex-col gap-y-1.5">
                                <div class="flex justify-between items-center">
                                    <div class="value">Enabling this controller service</div>
                                    <ng-container
                                        *ngTemplateOutlet="
                                            getTemplateForStep(SetEnableStep.EnableService, enableRequest)
                                        "></ng-container>
                                </div>
                                <div
                                    *ngIf="
                                        enableRequest.error && enableRequest.error.step == SetEnableStep.EnableService
                                    "
                                    class="text-xs ml-2">
                                    {{ enableRequest.error.error }}
                                </div>
                                <ng-container *ngIf="enableRequest.scope === 'SERVICE_AND_REFERENCING_COMPONENTS'">
                                    <div class="flex justify-between items-center">
                                        <div class="value">Enable referencing controller services</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                getTemplateForStep(
                                                    SetEnableStep.EnableReferencingServices,
                                                    enableRequest
                                                )
                                            "></ng-container>
                                    </div>
                                    <div
                                        *ngIf="
                                            enableRequest.error &&
                                            enableRequest.error.step == SetEnableStep.EnableReferencingServices
                                        "
                                        class="text-xs ml-2">
                                        {{ enableRequest.error.error }}
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <div class="value">Starting referencing processors and reporting tasks</div>
                                        <ng-container
                                            *ngTemplateOutlet="
                                                getTemplateForStep(
                                                    SetEnableStep.StartReferencingComponents,
                                                    enableRequest
                                                )
                                            "></ng-container>
                                    </div>
                                    <div
                                        *ngIf="
                                            enableRequest.error &&
                                            enableRequest.error.step == SetEnableStep.StartReferencingComponents
                                        "
                                        class="text-xs ml-2">
                                        {{ enableRequest.error.error }}
                                    </div>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                    <div class="w-96 flex flex-col">
                        <div>Referencing Components</div>
                        <div>
                            <controller-service-references
                                [serviceReferences]="controllerService.component.referencingComponents"
                                [goToReferencingComponent]="goToReferencingComponent"></controller-service-references>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
            <mat-dialog-actions align="end">
                <ng-container
                    *ngIf="
                        enableRequest.currentStep === SetEnableStep.Completed || enableRequest.error;
                        else updateInProgressActions
                    ">
                    <button color="primary" mat-raised-button mat-dialog-close>Close</button>
                </ng-container>
                <ng-template #updateInProgressActions>
                    <button color="accent" (click)="cancelClicked()" mat-raised-button mat-dialog-close>Cancel</button>
                </ng-template>
            </mat-dialog-actions>
        </ng-template>
    </form>
</ng-container>
<ng-template #stepInProgress>
    <div class="fa fa-spin fa-circle-o-notch"></div>
</ng-template>
<ng-template #stepComplete>
    <div class="fa fa-check text-green-500"></div>
</ng-template>
<ng-template #stepError>
    <div class="fa fa-times text-red-400"></div>
</ng-template>
<ng-template #stepNotStarted><div class="w-3.5"></div></ng-template>
