<!--
  ~ 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 *ngIf="story">
  <nb-accordion-item
    [expanded]="!!storyNode || !story._id || story.selected"
    [disabled]="!!storyNode || !story._id"
    (collapsedChange)="toggleStoryPanel($event)"
  >
    <nb-accordion-item-header>
      <div class="story-accordion-header d-flex flex-wrap">
        <div>
          <span *ngIf="!storyNode">
            <nb-icon
              *ngIf="story.isBuiltIn()"
              nbTooltip="Built-in Story"
              icon="box"
              class="align-middle"
            ></nb-icon>
            <nb-icon
              *ngIf="story.isSimpleNonFaqAnswer()"
              nbTooltip="Message Story"
              icon="chat-left"
              class="align-middle"
            ></nb-icon>
            <nb-icon
              *ngIf="story.isSimpleFaqAnswer()"
              class="align-middle"
              nbTooltip="Message Faq Story"
              icon="chat-left-text"
            ></nb-icon>
            <nb-icon
              *ngIf="story.isScriptAnswer()"
              nbTooltip="Script Story"
              icon="code"
              class="align-middle"
            ></nb-icon>
            <span
              *ngIf="!storyNode"
              nbTooltip="Story name"
              class="answer-title"
            >
              {{ story.name }}
            </span>
          </span>

          <span
            *ngIf="storyNode"
            nbTooltip="Story name"
            class="answer-title"
          >
            <div>
              <span>{{ story.name }}</span>
              <nb-badge
                *ngIf="displayCount"
                [text]="storyNode.displayCount()"
                status="info"
                position="top right"
              ></nb-badge>
            </div>
          </span>
        </div>

        <div>
          <tock-answer
            *ngIf="!storyNode && story._id && !story.isBuiltIn()"
            class="answer"
            [answer]="story"
            [fullDisplay]="false"
            [wide]="true"
          ></tock-answer>

          <button
            *ngIf="!story.isBuiltIn()"
            nbButton
            ghost
            shape="round"
            nbTooltip="Edit story"
            (click)="$event.stopPropagation(); editStory()"
          >
            <nb-icon icon="pencil"></nb-icon>
          </button>
          <button
            *ngIf="!story.isBuiltIn()"
            nbButton
            ghost
            shape="round"
            nbTooltip="Edit Mandatory Entities"
            (click)="$event.stopPropagation(); editEntities()"
          >
            <nb-icon icon="paperclip"></nb-icon>
          </button>
          <button
            *ngIf="!story.isBuiltIn()"
            nbButton
            ghost
            shape="round"
            nbTooltip="Edit Actions"
            (click)="$event.stopPropagation(); editSteps()"
          >
            <nb-icon icon="bar-chart-steps"></nb-icon>
          </button>
          <button
            *ngIf="story._id"
            nbButton
            ghost
            shape="round"
            nbTooltip="Export Story"
            (click)="$event.stopPropagation(); download(story)"
          >
            <nb-icon icon="download"></nb-icon>
          </button>
          <button
            *ngIf="story._id"
            nbButton
            ghost
            shape="round"
            nbTooltip="Delete"
            (click)="$event.stopPropagation(); deleteStory()"
          >
            <nb-icon icon="trash"></nb-icon>
          </button>
        </div>
      </div>
    </nb-accordion-item-header>
    <nb-accordion-item-body>
      <div class="content">
        <!-- Settings card -->
        <nb-accordion class="story-settings">
          <nb-accordion-item>
            <nb-accordion-item-header>
              <div>
                <div>
                  <span
                    class="font-weight-bold initial-capitalize"
                    nbTooltip="Main intent"
                  >
                    {{ story.intent.name }}
                  </span>
                  <span nbTooltip="Story category"> [{{ story.category }}]</span>
                </div>
                <div>
                  <small
                    *ngIf="story.description"
                    class="text-mitigated truncate"
                  >
                    {{ story.description }}
                  </small>

                  <ul *ngIf="storyNode">
                    <li *ngIf="storyNode.intent">
                      Intent: <b>{{ storyNode.intent }}</b>
                    </li>
                    <li *ngIf="storyNode.step">
                      Step: <b>{{ storyNode.step }}</b>
                    </li>
                    <li *ngIf="storyNode.entities.length !== 0">
                      Entities: <b>{{ storyNode.entities }}</b>
                    </li>
                  </ul>
                </div>
              </div>
            </nb-accordion-item-header>
            <nb-accordion-item-body>
              <tock-story-tag
                class="story-tag"
                [(selectedTag)]="storyTag"
              ></tock-story-tag>
            </nb-accordion-item-body>
          </nb-accordion-item>
        </nb-accordion>

        <div *ngIf="!story.hideDetails && !story.isBuiltIn()">
          <!-- Mandatory entities -->
          <nb-card
            *ngIf="story.mandatoryEntities.length !== 0"
            class="section-card"
          >
            <nb-card-header class="d-flex justify-content-between align-items-start flex-wrap">
              Mandatory entities
              <button
                nbButton
                ghost
                shape="round"
                nbTooltip="Edit"
                (click)="editEntities()"
              >
                <nb-icon icon="pencil"></nb-icon>
              </button>
            </nb-card-header>
            <nb-list>
              <nb-list-item *ngFor="let e of story.mandatoryEntities">
                {{ e.role }}
                <span
                  *ngIf="e.intent"
                  class="font-italic"
                  nbTooltip="Intent requested"
                  >[{{ e.intent.name }}]</span
                >:
                <tock-answer
                  class="answer"
                  [answer]="e"
                  [editable]="false"
                ></tock-answer>
              </nb-list-item>
            </nb-list>
          </nb-card>

          <!-- default answer -->
          <nb-card class="section-card">
            <nb-card-header class="d-flex justify-content-between align-items-start flex-wrap">
              <span
                *ngIf="!fullDisplay"
                for="main_answer"
                class="label-answer"
                >Answer:</span
              >
              <span *ngIf="fullDisplay">Answers</span>
              <button
                *ngIf="canCustomiseMainAnswer()"
                nbButton
                ghost
                shape="round"
                nbTooltip="Customise answer by bot application configuration"
                (click)="customiseMainAnswer()"
              >
                <nb-icon icon="link-45deg"></nb-icon>
              </button>
            </nb-card-header>
            <nb-card-body class="section-card-body">
              <tock-answer
                id="main_answer"
                [answer]="story"
                [fullDisplay]="fullDisplay"
                [create]="!story._id"
                [submit]="submit"
              ></tock-answer>
            </nb-card-body>
          </nb-card>

          <!-- answers by bot configuration -->
          <nb-card
            *ngIf="story.configuredAnswers && story.configuredAnswers.length > 0"
            class="section-card"
          >
            <nb-card-header>Custom answers</nb-card-header>
            <nb-card-body class="section-card-body">
              <nb-card *ngFor="let configuredAnswer of story.configuredAnswers">
                <nb-card-header class="d-flex justify-content-between align-items-start flex-wrap">
                  <span><nb-icon icon="gear"></nb-icon> {{ configuredAnswer.botConfiguration }}</span>
                  <button
                    nbButton
                    ghost
                    shape="round"
                    nbTooltip="Delete"
                    status="danger"
                    (click)="deleteCustomAnswers(configuredAnswer)"
                  >
                    <nb-icon icon="trash"></nb-icon>
                  </button>
                </nb-card-header>
                <nb-card-body>
                  <tock-answer
                    [answer]="configuredAnswer.containedIn(story)"
                    [fullDisplay]="fullDisplay"
                  ></tock-answer>
                </nb-card-body>
              </nb-card>
            </nb-card-body>
          </nb-card>

          <!-- Story steps/action -->
          <nb-card class="section-card">
            <nb-card-header class="d-flex justify-content-between align-items-start flex-wrap">
              Actions
              <div class="d-flex gap-1">
                <nb-toggle
                  ngDefaultControl
                  nbTooltip="The step indicators recorded for a metric story, refer to the story with which the user has previously interacted. A metrics story must be a redirected story and is generally used to evaluate user satisfaction. At least one step must refer to an indicator to be activated."
                  [(ngModel)]="story.metricStory"
                  [disabled]="!canBeMetricStory()"
                >
                  Metrics story
                </nb-toggle>

                <button
                  class="mb-2"
                  nbButton
                  ghost
                  shape="round"
                  nbTooltip="Customise actions by bot application configuration"
                  (click)="addCustomSteps()"
                >
                  <nb-icon icon="link-45deg"></nb-icon>
                </button>
              </div>
            </nb-card-header>
            <nb-card-body class="section-card-body">
              <tock-steps
                [steps]="story.steps"
                [defaultCategory]="story.category"
                [readonly]="!displaySteps"
              ></tock-steps>
            </nb-card-body>
          </nb-card>

          <!-- steps by bot configuration -->
          <nb-card
            *ngIf="story.configuredSteps && story.configuredSteps.length > 0"
            class="section-card"
          >
            <nb-card-header>Custom actions</nb-card-header>
            <nb-card-body class="section-card-body">
              <nb-card *ngFor="let configuredSteps of story.configuredSteps">
                <nb-card-header class="d-flex justify-content-between align-items-start flex-wrap">
                  <span><nb-icon icon="gear"></nb-icon> {{ configuredSteps.botConfiguration }}</span>
                  <button
                    nbButton
                    ghost
                    shape="round"
                    status="danger"
                    nbTooltip="Delete"
                    (click)="deleteCustomSteps(configuredSteps)"
                  >
                    <nb-icon icon="trash"></nb-icon>
                  </button>
                </nb-card-header>
                <nb-card-body>
                  <tock-steps
                    [steps]="configuredSteps.steps"
                    [defaultCategory]="story.category"
                    [readonly]="!displaySteps"
                  ></tock-steps>
                </nb-card-body>
              </nb-card>
            </nb-card-body>
          </nb-card>
        </div>
      </div>
      <div
        *ngIf="storyNode || story._id"
        class="accordion-footer card-footer-actions"
      >
        <button
          *ngIf="!story._id"
          nbButton
          status="primary"
          size="small"
          (click)="saveNewStory()"
        >
          <nb-icon icon="plus"></nb-icon>
          Create
        </button>
        <button
          *ngIf="story._id"
          nbButton
          ghost
          size="small"
          (click)="cancelManagingStory()"
        >
          <nb-icon icon="x-lg"></nb-icon>
          Cancel
        </button>
        <button
          *ngIf="story._id && !story.isBuiltIn()"
          nbButton
          status="primary"
          size="small"
          (click)="saveStory(false); submitClose()"
        >
          <nb-icon icon="floppy"></nb-icon>
          Update
        </button>
        <button
          *ngIf="story._id && story.isBuiltIn()"
          nbButton
          status="primary"
          size="small"
          (click)="manageStory()"
        >
          Manage
        </button>
      </div>
    </nb-accordion-item-body>
  </nb-accordion-item>
</nb-accordion>

<nb-card *ngIf="!story && storyNode">
  <nb-card-header>
    <span
      class="answer-title"
      nbTooltip="Story name"
    >
      {{ storyNode.nodeName() }}
      <nb-badge
        [text]="storyNode.displayCount()"
        status="info"
      ></nb-badge>
    </span>
  </nb-card-header>
  <nb-card-body>
    <ul>
      <li *ngIf="storyNode.intent">
        Intent: <b>{{ storyNode.intent }}</b>
      </li>
      <li *ngIf="storyNode.step">
        Step: <b>{{ storyNode.step }}</b>
      </li>
      <li *ngIf="storyNode.entities.length !== 0">
        Entities: <b>{{ storyNode.entities }}</b>
      </li>
      <li>{{ storyNode.count }} {{ storyNode.count === 1 ? 'instance' : 'instances' }}</li>
    </ul>
  </nb-card-body>
  <nb-card-footer>
    <button
      nbButton
      (click)="createStory()"
    >
      Create Managed Story
    </button>
  </nb-card-footer>
</nb-card>
