<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed 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.
  -->

<nb-accordion class="mb-4">
  <nb-accordion-item>
    <nb-accordion-item-header>
      <div class="flex-grow-1 pr-4">
        <div class="d-flex justify-content-between gap-1">
          <div
            class="source-icon"
            [ngClass]="{
              'text-primary': source.status === ProcessAdvancement.complete,
              'text-success': source.status === ProcessAdvancement.running,
              'text-danger': source.status === ProcessAdvancement.error
            }"
          >
            <nb-icon
              *ngIf="source.source_type === sourceTypes.file"
              icon="file-text"
            ></nb-icon>
            <nb-icon
              *ngIf="source.source_type === sourceTypes.remote"
              icon="link"
            ></nb-icon>
          </div>

          <div class="flex-grow-1">
            <strong class="lead">
              {{ source.name }}
            </strong>
            <div>
              Type : {{ source.source_type }}
              <!-- <span *ngIf="source.source_type === sourceTypes.remote">({{ source.source_parameters.source_url }})</span> -->
            </div>

            <div *ngIf="source.description">Description : {{ source.description }}</div>
          </div>

          <div class="d-flex align-items-center justify-content-between">
            <button
              nbButton
              ghost
              shape="round"
              nbTooltip="Edit source"
              class="mb-2"
              (click)="editSource($event)"
              *ngIf="!hasIndexingSessionRunning()"
            >
              <nb-icon icon="pencil"></nb-icon>
            </button>

            <button
              nbButton
              ghost
              shape="round"
              status="danger"
              nbTooltip="Delete source"
              class="mb-2"
              (click)="deleteSource($event)"
              *ngIf="!hasIndexingSessionRunning()"
            >
              <nb-icon icon="trash"></nb-icon>
            </button>

            <nb-toggle
              class="mx-2"
              nbTooltip="Activate/deactivate source"
              [checked]="source.enabled"
              (click)="$event.stopPropagation()"
              (mousedown)="toggleSourceEnabled()"
              *ngIf="!hasIndexingSessionRunning()"
            >
            </nb-toggle>

            <button
              nbButton
              shape="round"
              status="primary"
              size="small"
              nbTooltip="Update source"
              class="ml-2 mb-2"
              (click)="updateSource($event)"
              *ngIf="!hasIndexingSessionRunning()"
            >
              <nb-icon icon="arrow-repeat"></nb-icon>
              Update source
            </button>
          </div>
        </div>
        <div
          class="stepper mt-3 ml-2"
          *ngIf="source.enabled && hasIndexingSessionRunning()"
        >
          <div *ngFor="let task of getRunningIndexingSessionTasks(); let i = index; let last = last">
            <div
              class="step"
              [ngClass]="{ done: isStepComplete(task.type), running: isStepRunning(task.type) }"
            >
              <div
                class="done-mark"
                *ngIf="isStepComplete(task.type)"
              >
                <nb-icon
                  icon="check-circle"
                  class="success"
                ></nb-icon>
              </div>
              <div class="icon-wrapper">
                <nb-icon
                  [icon]="task.icon"
                  *ngIf="!isStepRunning(task.type)"
                ></nb-icon>
                <nb-icon
                  icon="arrow-repeat"
                  *ngIf="isStepRunning(task.type)"
                ></nb-icon>
              </div>
              <span class="label">{{ task.label }}</span>
            </div>

            <div
              *ngIf="!last"
              class="connector"
              [ngClass]="{ active: isStepComplete(task.type) }"
            >
              <div class="line"></div>
              <div class="arrow"></div>
            </div>
          </div>
        </div>
      </div>
    </nb-accordion-item-header>

    <nb-accordion-item-body>
      <div class="sessions sessions-header small font-weight-bold font-italic">
        <div>Session</div>
        <div>Embedding engine</div>
        <div>Start date</div>
        <div>End date</div>
        <div>Status</div>
      </div>

      <div
        *ngIf="!source.indexing_sessions?.length"
        class="text-center text-muted font-italic small my-2"
      >
        No indexing sessions yet
      </div>

      <div
        *ngFor="let session of source.indexing_sessions"
        class="sessions sessions-body small align-items-center"
        [ngClass]="{ 'font-weight-bold': isCurrentIndexingSession(session) }"
      >
        <div>
          {{ session.id }}
        </div>

        <div>
          {{ session.embeding_engine }}
        </div>
        <div>
          {{ session.start_date | date: 'HH:mm:ss y/MM/dd' }}
        </div>
        <div>
          {{ session.end_date | date: 'HH:mm:ss y/MM/dd' }}
        </div>
        <div
          [ngClass]="{
            'text-primary': session.status === ProcessAdvancement.complete,
            'text-success': session.status === ProcessAdvancement.running,
            'text-danger': session.status === ProcessAdvancement.error
          }"
        >
          {{ session.status }}
        </div>

        <div>
          <nb-icon
            *ngIf="isCurrentIndexingSession(session) && isSessionComplete(session)"
            status="success"
            class="m-2"
            icon="check-lg"
          ></nb-icon>

          <div
            class="d-flex"
            *ngIf="!isCurrentIndexingSession(session) && !hasIndexingSessionRunning()"
          >
            <button
              nbButton
              ghost
              shape="round"
              nbTooltip="Set as current session"
              (click)="setSessionAsCurrent(session)"
            >
              <nb-icon icon="check2-circle"></nb-icon>
            </button>

            <button
              nbButton
              ghost
              shape="round"
              status="danger"
              nbTooltip="Delete session"
              (click)="deleteSession(session)"
            >
              <nb-icon icon="trash"></nb-icon>
            </button>
          </div>
        </div>
      </div>
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>
