<nz-tabset
  class="main-view-tabs"
  [nzAnimated]="false"
  nzSize="small"
  [nzTabBarGutter]="16"
  [(nzSelectedIndex)]="selectedIndex"
>
  <nz-tab [nzTitle]="'QUERY_TAB' | translate">
    <div class="query-editor-container">
      <app-codemirror
        #editor
        class="query-editor__input"
        [fullHeight]="true"
        [extensions]="editorExtensions"
        [ngModel]="query"
        (ngModelChange)="queryChange.emit($event)"
        ngDefaultControl
      ></app-codemirror>
    </div>
    <div
      class="variables-editor-container"
      [ngClass]="{ 'show-variables': showVariableDialog }"
      mwlResizable
      [ngStyle]="{
        minHeight: showVariableDialog ? variableEditorHeight : undefined,
      }"
      [enableGhostResize]="true"
      [validateResize]="validate"
      (resizeEnd)="onResizeEnd($event)"
    >
      <div
        class="variables-editor--title"
        track-id="toggle_variables"
        (click)="toggleVariableDialog.next($event)"
      >
        {{ 'VARIABLES_TEXT' | translate }}
      </div>
      @if (showVariableDialog) {
        <div
          class="variables-editor-inner"
          [ngClass]="{ hide: !showVariableDialog }"
        >
          <div
            class="variable-editor-resizer"
            mwlResizeHandle
            [resizeEdges]="{ top: true }"
          ></div>
          <div class="variables-editor-input-container">
            <app-variables-editor
              [variables]="variables?.variables"
              [variableToType]="variableToType"
              [tabSize]="tabSize"
              [showVariableDialog]="showVariableDialog"
              [enableExperimental]="enableExperimental"
              (variablesChange)="variablesChange.emit($event)"
            ></app-variables-editor>
          </div>
          <div class="variables-files-container">
            <button
              class="variables-add-files-button"
              track-id="add_file_variable"
              (click)="addFileVariableChange.emit()"
            >
              {{ 'ADD_FILES_TEXT' | translate }}
            </button>
            <a
              href="https://sirmuel.design/working-with-file-uploads-using-altair-graphql-d2f86dc8261f"
              target="_blank"
              rel="noopener"
            >
              <app-icon name="info"></app-icon>
              {{ 'LEARN_MORE_TEXT' | translate }}
            </a>
            <div class="variables-files-list">
              @for (
                file of variables?.files;
                track trackByIndex(index, file);
                let index = $index
              ) {
                <app-variable-file-item
                  [fileVariable]="file"
                  (fileVariableNameChange)="
                    fileVariableNameChange.emit({ index: index, name: $event })
                  "
                  (fileVariableDataChange)="
                    fileVariableDataChange.emit({
                      index: index,
                      fileData: $event.files,
                      fromCache: $event.fromCache,
                    })
                  "
                  (fileVariableIsMultipleChange)="
                    fileVariableIsMultipleChange.emit({
                      index: index,
                      isMultiple: $event,
                    })
                  "
                  (deleteFileVariableChange)="
                    deleteFileVariableChange.emit({ index: index })
                  "
                ></app-variable-file-item>
              }
            </div>
          </div>
        </div>
      }
    </div>
  </nz-tab>
  <nz-tab [nzTitle]="preRequestTitleTemplate">
    <ng-template #preRequestTitleTemplate>
      <span [ngClass]="{ 'ant-tabs--status-enabled': preRequest?.enabled }">
        {{ 'PRE_REQUEST_TAB' | translate }}
      </span>
    </ng-template>
    <app-pre-request-editor
      [preRequest]="preRequest"
      (preRequestScriptChange)="preRequestScriptChange.emit($event)"
      (preRequestEnabledChange)="preRequestEnabledChange.emit($event)"
    ></app-pre-request-editor>
  </nz-tab>
  <nz-tab [nzTitle]="postRequestTitleTemplate">
    <ng-template #postRequestTitleTemplate>
      <span [ngClass]="{ 'ant-tabs--status-enabled': postRequest?.enabled }">
        {{ 'POST_REQUEST_TAB' | translate }}
      </span>
    </ng-template>
    <app-post-request-editor
      [postRequest]="postRequest"
      (postRequestScriptChange)="postRequestScriptChange.emit($event)"
      (postRequestEnabledChange)="postRequestEnabledChange.emit($event)"
    ></app-post-request-editor>
  </nz-tab>
  <nz-tab [nzTitle]="authorizationTitleTemplate">
    <ng-template #authorizationTitleTemplate>
      <span
        [ngClass]="{
          'ant-tabs--status-enabled':
            authorizationState && isAuthorizationEnabled(authorizationState),
        }"
      >
        {{ 'AUTHORIZATION_TAB' | translate }}
      </span>
    </ng-template>

    <app-authorization-editor
      [authorizationState]="authorizationState"
      (authTypeChange)="authTypeChange.emit($event)"
      (authDataChange)="authDataChange.emit($event)"
    />
  </nz-tab>
</nz-tabset>
