<tock-sticky-menu [offset]="50">
  <div class="d-flex">
    <h1 class="flex-grow-1 mb-0">Application vector database settings</h1>

    <section class="grid-actions">
      <button
        [disabled]="!hasExportableData"
        nbButton
        ghost
        shape="round"
        nbTooltip="Export Vector DB settings dump"
        (click)="exportSettings()"
      >
        <nb-icon icon="download"></nb-icon>
      </button>
      <button
        nbButton
        ghost
        shape="round"
        nbTooltip="Import Vector DB settings dump"
        (click)="importSettings()"
      >
        <nb-icon icon="upload"></nb-icon>
      </button>

      <button
        *ngIf="settingsBackup && form.dirty"
        nbButton
        ghost
        status="primary"
        nbTooltip="Cancel modifications"
        (click)="cancel()"
      >
        <nb-icon icon="x-circle"></nb-icon>
        CANCEL
      </button>
      <button
        *ngIf="form.dirty"
        nbButton
        status="primary"
        nbTooltip="Save settings"
        (click)="submit()"
      >
        <nb-icon icon="floppy"></nb-icon>
        SAVE
      </button>
    </section>
  </div>

  <small>
    Optional vector database provider. By default, the vector database used to index the Rag documents is defined in environment variables,
    but if you need a specific vector database for this application, you can provide its configuration here. This configuration will
    override the environment configuration for the application
    <b
      ><i>{{ state.currentApplication.name }}</i></b
    >.
  </small>
</tock-sticky-menu>

<tock-no-data-found
  *ngIf="configurations?.length === 0"
  title="No bot configuration detected"
></tock-no-data-found>

<form
  [formGroup]="form"
  *ngIf="configurations?.length > 0"
>
  <nb-card class="mt-2">
    <nb-card-body [nbSpinner]="loading">
      <h5 class="section-title">Vector DB activation</h5>

      <tock-form-control
        name="enabled"
        [controls]="enabled"
        [showError]="isSubmitted"
        [hasMargin]="false"
      >
        <nb-toggle
          formControlName="enabled"
          class="mt-1"
        >
          <span *ngIf="enabled.value">Vector DB activated</span>
          <span *ngIf="!enabled.value">Vector DB deactivated</span>
        </nb-toggle>
      </tock-form-control>

      <h5 class="section-title">
        Vector DB provider for application <i>{{ state.currentApplication.name }}</i>
      </h5>

      <tock-form-control
        name="vectorDbProvider"
        [controls]="vectorDbProvider"
        [required]="true"
        [showError]="isSubmitted"
      >
        <nb-radio-group
          formControlName="vectorDbProvider"
          name="vectorDbProvider"
          class="d-flex"
        >
          <nb-radio
            *ngFor="let provider of providersConfigurations"
            [value]="provider.key"
          >
            {{ provider.label }}
          </nb-radio>
        </nb-radio-group>
      </tock-form-control>

      <div
        *ngIf="currentVectorDbProvider"
        class="mt-2 mb-2"
      >
        <div class="row mb-1">
          <ng-container *ngFor="let param of currentVectorDbProvider.params">
            <div
              class="col-6"
              [ngClass]="{ 'col-12': param.inputScale === 'fullwidth' }"
            >
              <tock-vector-db-provider-config-param-input
                parentGroup="setting"
                [configurationParam]="param"
                [form]="form"
                [isSubmitted]="isSubmitted"
              ></tock-vector-db-provider-config-param-input>
            </div>
          </ng-container>
        </div>
      </div>

      <ng-container *ngIf="settingsBackup">
        <h5 class="section-title mt-2">Settings deletion</h5>

        <button
          nbButton
          status="danger"
          nbTooltip="Delete settings"
          (click)="confirmSettingsDeletion()"
        >
          <nb-icon icon="trash"></nb-icon>
          DELETE SETTINGS
        </button>
      </ng-container>
    </nb-card-body>
  </nb-card>
</form>

<ng-template #exportConfirmationModal>
  <nb-card class="help-modal">
    <nb-card-header class="d-flex justify-content-between align-items-start gap-1">
      Confirmation of sensitive data export
      <button
        nbButton
        ghost
        shape="round"
        nbTooltip="Cancel"
        (click)="closeExportConfirmationModal()"
      >
        <nb-icon icon="x-lg"></nb-icon>
      </button>
    </nb-card-header>

    <nb-card-body>
      <div class="mb-2">Include the following sensitive data:</div>
      <div *ngFor="let sensitiveParam of sensitiveParams">
        <nb-checkbox
          status="basic"
          [(ngModel)]="sensitiveParam.include"
        >
          {{ sensitiveParam.label }}
          {{ sensitiveParam.param.label }}
        </nb-checkbox>
      </div>
    </nb-card-body>

    <nb-card-footer class="card-footer-actions">
      <button
        nbButton
        ghost
        size="small"
        (click)="closeExportConfirmationModal()"
      >
        Cancel
      </button>
      <button
        type="button"
        nbButton
        status="primary"
        size="small"
        (click)="confirmExportSettings()"
      >
        Export
      </button>
    </nb-card-footer>
  </nb-card>
</ng-template>

<ng-template #importModal>
  <nb-card class="help-modal">
    <nb-card-header class="d-flex justify-content-between align-items-start gap-1">
      Import Vector DB settings dump
      <button
        nbButton
        ghost
        shape="round"
        nbTooltip="Cancel"
        (click)="closeImportModal()"
      >
        <nb-icon icon="x-lg"></nb-icon>
      </button>
    </nb-card-header>

    <nb-card-body>
      <form
        [formGroup]="importForm"
        (submit)="submitImportSettings()"
      >
        <tock-form-control
          label="Vector DB settings dump file"
          name="importFile"
          [required]="true"
          [controls]="fileSource"
          [showError]="isImportSubmitted"
        >
          <tock-file-upload
            id="importFile"
            formControlName="fileSource"
            [autofocus]="true"
            [fullWidth]="true"
            [multiple]="false"
            [fileTypeAccepted]="['json']"
          ></tock-file-upload>
        </tock-form-control>
      </form>
    </nb-card-body>

    <nb-card-footer class="card-footer-actions">
      <button
        nbButton
        ghost
        size="small"
        (click)="closeImportModal()"
      >
        Cancel
      </button>
      <button
        type="button"
        nbButton
        status="primary"
        size="small"
        (click)="submitImportSettings()"
      >
        Import
      </button>
    </nb-card-footer>
  </nb-card>
</ng-template>

<tock-scroll-top-button></tock-scroll-top-button>
