<!--
  ~ 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-card
  *ngIf="(botConfiguration.restConfigurations | async).length === 0"
  class="plans"
>
  No bot configuration detected
</nb-card>

<nb-card
  *ngIf="xray"
  class="plans"
>
  <nb-card-header>Execute XRay plan</nb-card-header>
  <nb-card-body>
    <tock-select-bot
      [configurationId]="xrayBotConfigurationId"
      [returnsRestConfiguration]="true"
      (selectionChange)="changeBotConfiguration($event)"
      [allowNoSelection]="true"
    ></tock-select-bot>

    <input
      nbInput
      status="primary"
      class="input-text"
      placeholder="JIRA Test Plan"
      [(ngModel)]="xray.testPlanKey"
      (keyup.enter)="executeXRay()"
    />

    <button
      nbbutton
      (click)="executeXRay()"
      color="primary"
    >
      Create
    </button>
    <div *ngIf="executeXray">
      <br />
      <img
        src="{{ baseHref }}assets/images/loading.gif"
        width="40px"
        height="40px"
      />
    </div>
  </nb-card-body>
</nb-card>

<nb-card
  *ngIf="(botConfiguration.restConfigurations | async).length !== 0"
  class="plans"
>
  <nb-card-header style="display: flex"
    >Test Plans
    <nb-actions
      size="small"
      style="cursor: pointer"
    >
      <nb-action
        class="control-item"
        (click)="prepareCreateTestPlan()"
        *ngIf="!testPlanCreation"
        nbTooltip="Create a new Test Plan"
      >
        <nb-icon icon="plus-square"></nb-icon>
      </nb-action>
    </nb-actions>
  </nb-card-header>
  <nb-card-body style="background: #dadfe638">
    <div
      *ngIf="testPlanCreation"
      class="new-plan"
    >
      <input
        nbInput
        placeholder="Test Plan name"
        status="primary"
        class="input-new-plan"
        [(ngModel)]="testPlanName"
        (keyup.enter)="createTestPlan()"
      />
      <tock-select-bot
        [(configurationId)]="testBotConfigurationId"
        [returnsRestConfiguration]="true"
      ></tock-select-bot>

      <nb-actions
        size="tiny"
        style="cursor: pointer"
      >
        <nb-action
          class="control-item"
          (click)="createTestPlan()"
          nbTooltip="Create"
          class="create"
        >
          <nb-icon
            icon="check-circle"
            status="success"
          ></nb-icon>
        </nb-action>
        <nb-action
          class="control-item"
          (click)="resetCreateTestPlan()"
          nbTooltip="Cancel"
        >
          <nb-icon
            icon="x-circle"
            status="danger"
          ></nb-icon>
        </nb-action>
      </nb-actions>
    </div>

    <div *ngIf="testPlans">
      <nb-card
        *ngFor="let p of testPlans"
        style="margin-bottom: 10px"
      >
        <nb-card-header>
          <div>
            Plan "{{ p.name }}" - {{ p.botName }}
            <button
              *ngIf="p.dialogs.length !== 0"
              nbButton
              ghost
              (click)="exec(p)"
              style="color: #73a1ff"
              nbTooltip="Launch"
            >
              <nb-icon icon="box-arrow-up-right"></nb-icon>
            </button>
            <div *ngIf="executePlan && p === this.runningTestPlan">
              <br />
              <img
                src="{{ baseHref }}assets/images/loading.gif"
                width="40px"
                height="40px"
              />
            </div>
            <nb-actions
              size="small"
              style="cursor: pointer; float: right"
            >
              <nb-action
                class="control-item"
                (click)="deleteTestPlan(p)"
                nbTooltip="Delete"
              >
                <nb-icon
                  icon="trash"
                  status="danger"
                ></nb-icon>
              </nb-action>
            </nb-actions>
          </div>
          <div style="font-size: 14px; font-weight: 300; margin-top: 10px">
            {{ p.dialogs.length }} Conversation{{ p.dialogs.length < 2 ? '' : 's' }}
            <span *ngIf="p.dialogs.length !== 0">
              -
              <button
                *ngIf="!p.displayDialog"
                nbButton
                (click)="showDialogs(p)"
              >
                <nb-icon icon="eye"></nb-icon>
                Display Conversation{{ p.dialogs.length < 2 ? '' : 's' }}
              </button>
              <button
                *ngIf="p.displayDialog"
                nbButton
                (click)="hideDialogs(p)"
              >
                <nb-icon icon="eye-slash"></nb-icon>
                Hide Conversation{{ p.dialogs.length < 2 ? '' : 's' }}
              </button>
            </span>
            <span *ngIf="p.dialogs.length === 0"> - you can add dialogs via the Analytics menu. </span>
          </div>
        </nb-card-header>
        <nb-card-body>
          <ol *ngIf="p.displayDialog">
            <li *ngFor="let d of p.dialogs">
              <span *ngIf="d.actions.length === 0"> (no content) </span>
              <span *ngIf="d.actions.length !== 0">
                <tock-chat-ui-message
                  [message]="d.actions[0].messages[0]"
                  [reply]="false"
                  [replay]="true"
                ></tock-chat-ui-message>
              </span>
              ...
              <button
                *ngIf="!d.displayActions"
                nbButton
                (click)="d.displayActions = true"
              >
                <nb-icon icon="eye"></nb-icon>
                Display all sentences
              </button>
              <button
                *ngIf="d.displayActions"
                nbButton
                (click)="d.displayActions = false"
              >
                <nb-icon icon="eye-slash"></nb-icon>
                Hide all sentences
              </button>
              <button
                nbButton
                (click)="removeDialog(p, d)"
                color="warn"
              >
                <nb-icon icon="trash"></nb-icon>
                Remove dialog
              </button>
              <tock-chat-ui *ngIf="d.displayActions">
                <ng-container *ngFor="let action of d.toDialogReport().actions">
                  <tock-chat-ui-message
                    [message]="action.message"
                    [date]="action.date"
                    [reply]="action.isBot()"
                    [replay]="true"
                    [sender]="getUserName(action)"
                    [avatar]="getUserAvatar(action)"
                  ></tock-chat-ui-message>
                </ng-container>
              </tock-chat-ui>
            </li>
          </ol>

          <nb-accordion *ngIf="p.testPlanExecutions && p.testPlanExecutions.length > 0">
            <nb-accordion-item>
              <nb-accordion-item-header>
                {{ p.testPlanExecutions.length }} Executions
                <span class="last-execution-status">&nbsp;- last execution status :</span>
                <span *ngIf="p.testPlanExecutions[0].nbErrors === 0">
                  <nb-icon
                    icon="check-circle"
                    status="success"
                  ></nb-icon>
                </span>
                <span *ngIf="p.testPlanExecutions[0].nbErrors !== 0">
                  <nb-icon
                    icon="x-circle"
                    status="danger"
                  ></nb-icon>
                </span>
              </nb-accordion-item-header>
              <nb-accordion-item-body>
                <ol>
                  <li *ngFor="let e of p.testPlanExecutions">
                    {{ e.date | amDateFormat: 'HH:mm:ss YYYY-MM-DD' }}
                    <button
                      *ngIf="!e.displayExecution"
                      nbButton
                      (click)="e.displayExecution = true"
                    >
                      <nb-icon icon="eye"></nb-icon>
                      Display details
                    </button>
                    <button
                      *ngIf="e.displayExecution"
                      nbButton
                      (click)="e.displayExecution = false"
                    >
                      <nb-icon icon="eye-slash"></nb-icon>
                      Hide details
                    </button>
                    <span *ngIf="e.nbErrors === 0">
                      <nb-icon
                        icon="check-circle"
                        status="success"
                      ></nb-icon>
                      {{ e.dialogs.length }} conversation{{ e.dialogs.length < 2 ? '' : 's' }}
                    </span>
                    <span *ngIf="e.nbErrors !== 0">
                      <nb-icon
                        icon="x-circle"
                        status="danger"
                      ></nb-icon>
                      {{ e.nbErrors }} error{{ e.nbErrors ? '' : 's' }} / {{ e.dialogs.length }} conversation{{
                        e.dialogs.length < 2 ? '' : 's'
                      }}
                    </span>
                    <ol *ngIf="e.displayExecution">
                      <li *ngFor="let details of e.dialogs">
                        <span *ngIf="!details.error">
                          <nb-icon
                            icon="check-circle"
                            status="success"
                          ></nb-icon>
                          Success</span
                        >

                        <span *ngIf="details.error">
                          <nb-icon
                            icon="x-circle"
                            status="danger"
                          ></nb-icon>
                          Error
                          <span *ngIf="details.dialogReport">
                            <h4>Expected dialog:</h4>

                            <tock-chat-ui>
                              <ng-container *ngFor="let action of details.dialogReport.actions">
                                <tock-chat-ui-message
                                  [message]="action.message"
                                  [date]="action.date"
                                  [reply]="action.isBot()"
                                  [replay]="true"
                                  [sender]="getUserName(action)"
                                  [avatar]="getUserAvatar(action)"
                                ></tock-chat-ui-message>
                              </ng-container>
                            </tock-chat-ui>

                            <span *ngIf="details.returnedMessage">
                              <h4>But last answer was:</h4>

                              <tock-chat-ui-message
                                [message]="details.returnedMessage"
                                [reply]="true"
                                [replay]="true"
                              ></tock-chat-ui-message>
                            </span>
                          </span>
                          <span *ngIf="details.errorMessage">{{ details.errorMessage }}</span>
                          <br />
                        </span>
                      </li>
                    </ol>
                  </li>
                </ol>
              </nb-accordion-item-body>
            </nb-accordion-item>
          </nb-accordion>

          <span *ngIf="p.displayExecutions"> </span>
        </nb-card-body>
      </nb-card>
    </div>
  </nb-card-body>
</nb-card>

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