<div class="app-window__content">
  <app-url-box
    [apiUrl]="apiUrl"
    [httpVerb]="(query$ | async)?.httpVerb"
    [isSubscribed]="isSubscribed$ | async"
    [isLoading]="(layout$ | async)?.isLoading"
    [showDocs]="showDocs$ | async"
    [selectedOperation]="selectedOperation$ | async"
    [queryOperations]="queryOperations$ | async"
    [streamState]="streamState$ | async"
    [currentCollection]="currentCollection$ | async"
    [hasUnsavedChanges]="hasUnsavedChanges$ | async"
    (urlChange)="setApiUrl($event)"
    (httpVerbChange)="setApiMethod($event)"
    (sendRequest)="sendRequest()"
    (toggleDocsChange)="toggleDocs()"
    (reloadDocsChange)="reloadDocs()"
    (addToCollectionChange)="setShowAddToCollectionDialog(true)"
    (selectedOperationChange)="selectOperation($event)"
    (exportWindowChange)="exportWindowData()"
    (updateQueryInCollectionChange)="updateQueryInCollection()"
  ></app-url-box>
  <div class="main-content-area">
    <div class="main-content-row" data-resize-container>
      <as-split [gutterSize]="5" [useTransition]="true">
        <as-split-area>
          <app-query-editor
            #queryEditor
            (queryChange)="updateQuery($event)"
            (sendRequest)="sendRequest($event)"
            (variablesChange)="updateVariables($event)"
            (toggleVariableDialog)="toggleVariableDialog($event)"
            (addFileVariableChange)="addFileVariable($event)"
            (fileVariableNameChange)="updateFileVariableName($event)"
            (fileVariableIsMultipleChange)="updateFileVariableIsMultiple($event)"
            (fileVariableDataChange)="updateFileVariableData($event)"
            (deleteFileVariableChange)="deleteFileVariable($event)"
            (queryEditorStateChange)="setQueryEditorState($event)"
            (showTokenInDocsChange)="onShowTokenInDocs($event)"
            (preRequestScriptChange)="updatePreRequestScript($event)"
            (preRequestEnabledChange)="updatePreRequestEnabled($event)"
            (postRequestScriptChange)="updatePostRequestScript($event)"
            (postRequestEnabledChange)="updatePostRequestEnabled($event)"
            (authTypeChange)="updateAuthType($event)"
            (authDataChange)="updateAuthData($event)"
            [windowId]="windowId"
            [activeWindowId]="activeWindowId$ | async"
            [query]="query"
            [gqlSchema]="gqlSchema"
            [tabSize]="tabSize$ | async"
            [disableLineNumbers]="disableLineNumbers$ | async"
            [variables]="variables$ | async"
            [showVariableDialog]="showVariableDialog"
            [addQueryDepthLimit]="addQueryDepthLimit$ | async"
            [variableToType]="variableToType$ | async"
            [preRequest]="preRequest$ | async"
            [postRequest]="postRequest$ | async"
            [shortcutMapping]="editorShortcutMapping$ | async"
            [enableExperimental]="enableExperimental$ | async"
            [betaDisableNewEditor]="betaDisableNewEditor$ | async"
            [authorizationState]="authorizationState$ | async"
          />
        </as-split-area>
        <as-split-area>
          <app-query-result
            [queryResponses]="queryResponses$ | async"
            [responseTime]="responseTime$ | async"
            [responseStatus]="responseStatus$ | async"
            [responseStatusText]="responseStatusText$ | async"
            [responseHeaders]="responseHeaders$ | async"
            [requestScriptLogs]="requestScriptLogs$ | async"
            [isSubscribed]="isSubscribed$ | async"
            [isRunning]="(layout$ | async)?.isLoading"
            [subscriptionUrl]="subscriptionUrl"
            [tabSize]="tabSize$ | async"
            [autoscrollResponseList]="autoscrollResponseList$ | async"
            [windowId]="windowId"
            [activeWindowId]="activeWindowId$ | async"
            [uiActions]="resultPaneUiActions$ | async"
            [bottomPanels]="resultPaneBottomPanels$ | async"
            (clearResultChange)="clearResult()"
            (downloadResultChange)="downloadResult($event)"
            (cancelRequestChange)="cancelRequest()"
            (autoscrollResponseListChange)="toggleAutoscrollSubscriptionResponses()"
            (uiActionExecuteChange)="onExecuteUiAction($event)"
            (bottomPanelActiveToggle)="togglePanelActive($event)"
          />
        </as-split-area>
        <as-split-area [visible]="showDocs$ | async">
          <app-doc-viewer
            [docView]="docView$ | async"
            [gqlSchema]="gqlSchema"
            [allowIntrospection]="allowIntrospection$ | async"
            [ngClass]="{ 'hide-doc': (showDocs$ | async) !== true }"
            [isLoading]="docsIsLoading$ | async"
            [addQueryDepthLimit]="addQueryDepthLimit$ | async"
            [hideDeprecatedDocItems]="hideDeprecatedDocItems$ | async"
            [tabSize]="tabSize$ | async"
            [lastUpdatedAt]="schemaLastUpdatedAt$ | async"
            (setDocViewChange)="setDocView($event)"
            (toggleDocsChange)="toggleDocs()"
            (addQueryToEditorChange)="addQueryToEditor($event)"
            (exportSDLChange)="exportSDL()"
            (loadSchemaChange)="loadSchemaFromSDL()"
          />
        </as-split-area>
      </as-split>
    </div>
  </div>
  <div class="dialogs">
    <nz-modal
      [nzVisible]="showHeaderDialog"
      (nzVisibleChange)="toggleHeader($event)"
      [nzCloseIcon]="'close-circle'"
      [nzTitle]="modalTitle"
      [nzContent]="modalContent"
      [nzFooter]="modalFooter"
      (nzOnCancel)="toggleHeader()"
    >
      <ng-template #modalTitle>
        <div class="app-dialog-header">
          <div class="app-dialog-title">{{ 'HEADERS_TEXT' | translate }}</div>
          {{ 'SET_HEADERS_DIALOG_SUBTEXT' | translate }}
        </div>
      </ng-template>

      <ng-template #modalContent>
        <div class="app-dialog-body">
          @for (
            header of headers$ | async;
            track trackByIndex(i, header);
            let i = $index
          ) {
            <div
              class="set-header-input-container"
              [ngClass]="{
                'set-header-input-container--disabled': !header.enabled,
              }"
            >
              <label
                nz-checkbox
                [ngModel]="header.enabled"
                (ngModelChange)="headerEnabledChange($event, i)"
              ></label>
              <div class="set-header-input-column">
                <app-x-input
                  class="input"
                  placeholder="Header key"
                  [ngModel]="header.key"
                  (ngModelChange)="headerKeyChange($event, i)"
                  (submitChange)="toggleHeader()"
                ></app-x-input>
              </div>
              <div class="set-header-input-column">
                <app-x-input
                  class="input"
                  placeholder="Header value"
                  [ngModel]="header.value"
                  (ngModelChange)="headerValueChange($event, i)"
                  (submitChange)="toggleHeader()"
                ></app-x-input>
              </div>
              <button class="header-input-remove-button" (click)="removeHeader(i)">
                &times;
              </button>
            </div>
          }
          @if (!isElectron) {
            <div class="headers__notice">
              {{ 'HEADERS_FORBIDDEN_NOTICE' | translate }}
              <a
                href="https://altairgraphql.dev/docs/learn/web-limitations"
                target="_blank"
                rel="noopener"
                >Learn more</a
              >
            </div>
          }
          <div class="headers__notice">
            {{ 'HEADERS_GLOBAL_HEADERS_NOTICE' | translate }}
            <a
              href="https://altairgraphql.dev/docs/features/environment-variables#special-environment-variables"
              target="_blank"
              rel="noopener"
              >Learn more</a
            >
          </div>
        </div>
      </ng-template>

      <ng-template #modalFooter>
        <div class="app-dialog-footer">
          <button track-id="add_header" class="btn left" (click)="addHeader()">
            {{ 'ADD_HEADER_TEXT' | translate }}
          </button>
          <button class="btn btn--primary right" (click)="toggleHeader()">
            {{ 'DONE_BUTTON' | translate }}
          </button>
        </div>
      </ng-template>
    </nz-modal>
    <app-request-handler-dialog
      [requestHandlerId]="(query$ | async)?.requestHandlerId"
      [requestHandlerAdditionalParams]="
        (query$ | async)?.requestHandlerAdditionalParams
      "
      [subscriptionUrl]="subscriptionUrl"
      [subscriptionConnectionParams]="subscriptionConnectionParams"
      [subscriptionUseDefaultRequestHandler]="
        (query$ | async)?.subscriptionUseDefaultRequestHandler
      "
      [selectedSubscriptionRequestHandlerId]="selectedSubscriptionRequestHandlerId"
      [requestHandlers]="availableRequestHandlers$ | async"
      [showDialog]="showRequestHandlerDialog"
      (toggleDialogChange)="toggleRequestHandlerDialog($event)"
      (requestHandlerInfoChange)="upateRequestHandlerInfo($event)"
    ></app-request-handler-dialog>
    <app-history-dialog
      [historyList]="historyList"
      [showDialog]="showHistoryDialog"
      (toggleDialogChange)="toggleHistoryDialog($event)"
      (restoreHistoryChange)="restoreHistory($event)"
      (clearHistoryChange)="clearHistory()"
    ></app-history-dialog>
    <app-dialog
      [showDialog]="showPreRequestDialog"
      [heading]="'PRE_REQUEST_EDITOR_HEADER' | translate"
      [subheading]="'PRE_REQUEST_EDITOR_SUBTEXT' | translate"
      (toggleDialog)="togglePreRequestDialog($event)"
    >
      <app-pre-request-editor
        [preRequest]="preRequest$ | async"
        (preRequestScriptChange)="updatePreRequestScript($event)"
        (preRequestEnabledChange)="updatePreRequestEnabled($event)"
      ></app-pre-request-editor>
    </app-dialog>
    <app-request-extensions-dialog
      [showDialog]="showRequestExtensionsDialog$ | async"
      [data]="(query$ | async)?.requestExtensions"
      (toggleDialogChange)="toggleRequestExtensionsDialog($event)"
      (dataChange)="updateRequestExtensions($event)"
    />
  </div>
</div>
