<!--
  ~  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 class="jolt-transform-json-ui p-5 flex flex-col h-full min-h-[495px] overflow-auto">
    <div class="flex-1 flex flex-col">
        <h3 class="primary-color">Advanced</h3>
        @if (processorDetails$ | async; as processorDetails) {
            <form [formGroup]="editJoltTransformJSONProcessorForm" class="h-full flex flex-row">
                <div class="w-1/3 pr-2 flex-1">
                    <mat-card class="h-full">
                        <mat-card-header>
                            <mat-card-title> Properties </mat-card-title>
                            <mat-card-subtitle>
                                <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                    <i
                                        class="fa fa-info-circle primary-color mr-2"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be used when transforming the input."></i
                                    >Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be
                                    used when transforming the input.
                                </div>
                            </mat-card-subtitle>
                        </mat-card-header>
                        <mat-card-content class="grow mt-4">
                            <div class="h-full flex flex-col">
                                <component-context
                                    [type]="'Processor'"
                                    [name]="processorDetails?.name"></component-context>
                                <div class="mt-2">
                                    <mat-form-field>
                                        <mat-label>
                                            Jolt Transform
                                            <i
                                                class="fa fa-info-circle"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Specifies the transformation that should be used to validate the provided jolt specification."></i>
                                        </mat-label>
                                        <mat-select formControlName="transform">
                                            @if (processorDetails?.descriptors; as descriptors) {
                                                @for (
                                                    option of descriptors['Jolt Transform'].allowableValues | keyvalue;
                                                    track option
                                                ) {
                                                    <mat-option [value]="option.key">
                                                        {{ option.value }}
                                                    </mat-option>
                                                }
                                            }
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                <div class="jolt-spec-editor grow mb-2">
                                    <div class="h-full flex flex-col">
                                        <div>
                                            <div class="font-bold">
                                                Jolt Specification
                                                <i
                                                    class="fa fa-info-circle primary-color ml-2"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    tooltipInputData="Jolt Specification for transformation of JSON data. The value for this property may be the text of a Jolt specification or the path to a file containing a Jolt specification. 'Jolt Specification' must be set, or the value is ignored if the Jolt Sort Transformation is selected."></i>
                                            </div>
                                        </div>
                                        <div class="flex justify-end mb-2">
                                            <button
                                                mat-icon-button
                                                class="primary-icon-button"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                [tooltipInputData]="getFormatTooltip()"
                                                (click)="formatSpecification()">
                                                <i class="fa fa-align-left"></i>
                                            </button>
                                        </div>
                                        <div class="relative flex-1">
                                            <div class="jolt-spec-editor h-full w-full absolute overflow-auto">
                                                <ngx-codemirror
                                                    formControlName="specification"
                                                    [options]="getJoltSpecOptions()"
                                                    (mousedown)="preventDrag($event)"
                                                    (codeMirrorLoaded)="initSpecEditor($event)"></ngx-codemirror>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
                                    @if (joltState.validate().loading) {
                                        <i
                                            class="fa fa-refresh fa-spin mr-2"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="Validating..."></i
                                        ><mat-hint>Validating...</mat-hint>
                                    } @else {
                                        @if (joltState.validate().validationResponse?.valid) {
                                            <i
                                                class="fa fa-check success-color-default mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="The specification is valid."></i
                                            ><mat-hint>The specification is valid.</mat-hint>
                                        } @else if (
                                            joltState.validate().validationResponse?.valid === false &&
                                            joltState.validate().validationResponse?.message !== null
                                        ) {
                                            <i
                                                class="fa fa-warning caution-color mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                [tooltipInputData]="
                                                    joltState.validate().validationResponse?.message
                                                "></i
                                            ><mat-hint>{{ joltState.validate().validationResponse?.message }}</mat-hint>
                                        } @else if (joltState.validate().validationFailureResponse) {
                                            <i
                                                class="fa fa-warning caution-color mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                [tooltipInputData]="
                                                    joltState.validate().validationFailureResponse?.message
                                                "></i
                                            ><mat-hint>{{
                                                joltState.validate().validationFailureResponse?.message
                                            }}</mat-hint>
                                        }
                                    }
                                    @if (joltState.properties().saving) {
                                        <i
                                            class="fa fa-refresh fa-spin text-shadow mr-2"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="Saving Properties..."></i
                                        ><mat-hint>Saving...</mat-hint>
                                    } @else {
                                        @if (joltState.properties().savePropertiesResponse) {
                                            <i
                                                class="fa fa-check success-color-default text-shadow mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Properties successfully saved!"></i
                                            ><mat-hint>Properties successfully saved!</mat-hint>
                                        } @else if (joltState.properties().savePropertiesFailureResponse) {
                                            <i
                                                class="fa fa-warning caution-color text-shadow mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                [tooltipInputData]="
                                                    joltState.properties().savePropertiesFailureResponse?.message
                                                "></i
                                            ><mat-hint>{{
                                                joltState.properties().savePropertiesFailureResponse?.message
                                            }}</mat-hint>
                                        }
                                    }
                                    @if (
                                        joltState.properties().savePropertiesResponse === null &&
                                        joltState.properties().savePropertiesFailureResponse === null &&
                                        joltState.validate().validationResponse === null &&
                                        joltState.validate().validationFailureResponse === null
                                    ) {
                                        <i
                                            class="fa fa-info-circle primary-color mr-2"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="Click the validate button to verify the specification for the selected transformation. Click the save button to apply the current values to the processor's configuration."></i>
                                        <mat-hint
                                            >Click the validate button to verify the specification for the selected
                                            transformation. Click the save button to apply the current values to the
                                            processor's configuration.</mat-hint
                                        >
                                    }
                                </div>
                            </div>
                        </mat-card-content>
                        <mat-card-actions>
                            <div class="flex flex-1 justify-between">
                                <button
                                    mat-stroked-button
                                    (click)="validateJoltSpec()"
                                    [disabled]="isValidateDisabled()">
                                    Validate
                                </button>
                                <button mat-flat-button (click)="saveProperties()" [disabled]="isSaveDisabled()">
                                    Save
                                </button>
                            </div>
                        </mat-card-actions>
                    </mat-card>
                </div>
                <div class="w-1/3 pl-2 pr-2 flex-1 flex-col">
                    <mat-card class="h-full">
                        <mat-card-header>
                            <mat-card-title>Flow File Input</mat-card-title>
                            <mat-card-subtitle>
                                <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                    <i
                                        class="fa fa-info-circle primary-color mr-2"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="Enter 'Example Data' and/or 'Attributes' to be transformed by the 'Jolt Transform' and 'Jolt Specification'."></i
                                    >Enter sample flow file content and optional attributes to be transformed by the
                                    defined 'Jolt Transform' and 'Jolt Specification'.
                                </div>
                            </mat-card-subtitle>
                        </mat-card-header>
                        <mat-card-content class="grow mt-4">
                            <div class="h-full flex flex-col">
                                <div class="grow flex flex-col gap-y-2">
                                    <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
                                        <mat-expansion-panel-header>
                                            <mat-panel-title>
                                                <div class="flex flex-1 justify-start">
                                                    <div>
                                                        Content
                                                        <i
                                                            class="fa fa-info-circle primary-color ml-2"
                                                            nifiTooltip
                                                            [tooltipComponentType]="TextTip"
                                                            tooltipInputData="Enter a JSON formatted input string to be transformed by the 'Jolt Transform' and 'Jolt Specification'."></i>
                                                    </div>
                                                </div>
                                            </mat-panel-title>
                                        </mat-expansion-panel-header>
                                        <div class="flex flex-col">
                                            <div class="flex justify-end mb-4">
                                                <button
                                                    mat-icon-button
                                                    class="primary-icon-button"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    [tooltipInputData]="getFormatTooltip()"
                                                    (click)="formatInput()">
                                                    <i class="fa fa-align-left"></i>
                                                </button>
                                            </div>
                                            <div class="input-editor">
                                                <ngx-codemirror
                                                    formControlName="input"
                                                    [options]="getExampleDataOptions()"
                                                    (mousedown)="preventDrag($event)"
                                                    (codeMirrorLoaded)="initInputEditor($event)"></ngx-codemirror>
                                            </div>
                                        </div>
                                    </mat-expansion-panel>
                                    <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
                                        <mat-expansion-panel-header>
                                            <mat-panel-title>
                                                <div class="flex flex-1 justify-start">
                                                    <div>
                                                        Attributes
                                                        <i
                                                            class="fa fa-info-circle primary-color ml-2"
                                                            nifiTooltip
                                                            [tooltipComponentType]="TextTip"
                                                            tooltipInputData="Enter test attributes to be transformed according to the specification along with the flow file input. NOTE: These attributes are not saved and will only be available during testing and not when executing the actual flow."></i>
                                                    </div>
                                                </div>
                                            </mat-panel-title>
                                        </mat-expansion-panel-header>
                                        <div class="flex-1">
                                            <div class="attributes-editor">
                                                <map-table
                                                    formControlName="expressionLanguageAttributes"
                                                    [createNew]="createNew"
                                                    [reportChangesOnly]="false">
                                                    <div class="flex flex-row justify-end items-center">
                                                        <button
                                                            title="Clear All"
                                                            mat-icon-button
                                                            class="primary-icon-button"
                                                            [disabled]="isEmpty()"
                                                            type="button"
                                                            (click)="clearAttributesClicked()">
                                                            <i class="fa fa-eraser"></i>
                                                        </button>
                                                    </div>
                                                </map-table>
                                            </div>
                                        </div>
                                    </mat-expansion-panel>
                                </div>
                                <div class="flex mt-2 justify-start">
                                    <div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
                                        @if (joltState.transform().loading) {
                                            <i
                                                class="fa fa-refresh fa-spin mr-2"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Transforming..."></i
                                            ><mat-hint>Transforming...</mat-hint>
                                        } @else {
                                            @if (joltState.transform().transformationResponse) {
                                                <i
                                                    class="fa fa-check success-color-default mr-2"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    tooltipInputData="The transform was successful."></i
                                                ><mat-hint>The transform was successful.</mat-hint>
                                            } @else if (joltState.transform().transformationFailureResponse) {
                                                <i
                                                    class="fa fa-warning caution-color mr-2"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    [tooltipInputData]="
                                                        joltState.transform().transformationFailureResponse?.message
                                                    "></i
                                                ><mat-hint>{{
                                                    joltState.transform().transformationFailureResponse?.message
                                                }}</mat-hint>
                                            } @else {
                                                <i
                                                    class="fa fa-info-circle primary-color mr-2"
                                                    nifiTooltip
                                                    [tooltipComponentType]="TextTip"
                                                    tooltipInputData="Click the transform button below to view the output of the transformation."></i
                                                ><mat-hint
                                                    >Click the transform button to view the output of the
                                                    transformation.</mat-hint
                                                >
                                            }
                                        }
                                    </div>
                                </div>
                            </div>
                        </mat-card-content>
                        <mat-card-actions>
                            <div class="flex flex-1 justify-start">
                                <button
                                    mat-stroked-button
                                    (click)="transformJoltSpec()"
                                    [disabled]="isTransformDisabled()">
                                    Transform
                                </button>
                            </div>
                        </mat-card-actions>
                    </mat-card>
                </div>
                <div class="w-1/3 pl-2">
                    <mat-card class="h-full">
                        <mat-card-header>
                            <mat-card-title> Output </mat-card-title>
                            <mat-card-subtitle>
                                <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
                                    <i
                                        class="fa fa-info-circle primary-color mr-2"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="The output of the transformation given the specification, flow file content, and (optional) attributes."></i
                                    >The output of the transformation given the specification, flow file content, and
                                    (optional) attributes.
                                </div>
                            </mat-card-subtitle>
                        </mat-card-header>
                        <mat-card-content class="grow">
                            <div class="h-full flex">
                                <div class="relative mt-4 flex-1">
                                    <div class="output-editor h-full w-full absolute overflow-auto">
                                        <ngx-codemirror
                                            [ngModel]="
                                                joltState.transform().transformationResponse
                                                    ? (joltState.transform().transformationResponse | json)
                                                    : ''
                                            "
                                            [ngModelOptions]="{ standalone: true }"
                                            [options]="getOutputOptions()"
                                            (mousedown)="preventDrag($event)"></ngx-codemirror>
                                    </div>
                                </div>
                            </div>
                        </mat-card-content>
                    </mat-card>
                </div>
            </form>
        } @else {
            @if (processorDetailsLoading$ | async) {
                <div class="h-full flex items-center justify-center">
                    <mat-spinner></mat-spinner>
                </div>
            } @else if (processorDetailsError()) {
                <div class="flex flex-1 justify-center items-center">
                    <i class="fa fa-warning caution-color mr-2"></i>{{ processorDetailsError() }}
                </div>
            }
        }
    </div>
</div>
