<!--
  ~ 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.
  -->

<h1>Stories flow</h1>

<nb-card class="mb-0">
  <nb-card-body [nbSpinner]="loading">
    <div class="d-flex justify-content-between align-items-center mt-2">
      <div class="flex-grow-1">
        <div class="row">
          <div class="col-3">
            <nb-form-field>
              <nb-icon
                nbPrefix
                icon="calendar"
              ></nb-icon>
              <input
                #dateRangeInput
                nbInput
                fieldSize="small"
                placeholder="Pick date range"
                [nbDatepicker]="dateRangePicker"
                [(ngModel)]="range"
                readonly
              />
            </nb-form-field>
          </div>
          <div class="col-9">
            <div class="flex-grow-1 d-flex justify-content-between">
              <ng-container *ngFor="let range of timeRanges">
                <button
                  nbButton
                  size="small"
                  ghost
                  [status]="getTimeRangeBttnStatus(range)"
                  nbTooltip="Display flow for {{ range.tooltipLabel }}"
                  (click)="setTimeRange(range)"
                  class="px-2"
                >
                  {{ range.label }}
                </button>
              </ng-container>
            </div>
          </div>
        </div>
        <nb-rangepicker
          #dateRangePicker
          [(range)]="range"
          (rangeChange)="datePickerChange($event)"
        ></nb-rangepicker>

        <div class="row mt-2">
          <div class="col-3">
            <nb-form-field nbTooltip="Select a display layout">
              <nb-icon
                nbPrefix
                icon="activity"
              ></nb-icon>
              <nb-select
                size="small"
                placeholder="Display layout"
                fullWidth
                [(ngModel)]="layout"
                (ngModelChange)="unselect()"
              >
                <nb-option
                  *ngFor="let lyout of layouts"
                  [value]="lyout"
                  >{{ lyout.name }}</nb-option
                >
              </nb-select>
            </nb-form-field>
          </div>

          <div class="col-9 d-flex align-items-center pt-0">
            <small class="text-muted text-nowrap my-0 mr-2">Mode :</small>
            <nb-radio-group
              class="d-flex"
              name="mode"
              [(ngModel)]="statsMode"
              (ngModelChange)="changeMode()"
            >
              <nb-radio
                class="text-nowrap smallHeight"
                [value]="true"
                nbTooltip="Show users flow (dynamic mode)"
                >Users flow</nb-radio
              >
              <nb-radio
                class="text-nowrap smallHeight"
                [value]="false"
                nbTooltip="Show available stories (static mode)"
                >Static mode</nb-radio
              >
            </nb-radio-group>
          </div>
        </div>
      </div>

      <div class="ml-3">
        <nb-icon
          *ngIf="!advanced"
          icon="chevron-down-outline"
          pack="nebular-essentials"
          (click)="swapAdvanced()"
          class="pointer"
          nbTooltip="Display advanced options"
        ></nb-icon>
        <nb-icon
          *ngIf="advanced"
          icon="chevron-up-outline"
          pack="nebular-essentials"
          (click)="swapAdvanced()"
          class="pointer"
          nbTooltip="Hide advanced options"
        ></nb-icon>
      </div>
    </div>

    <!-- ADVANCED -->
    <div
      class="mt-2"
      *ngIf="advanced"
      [@inOutHeightAnimation]
    >
      <div class="row mt-1">
        <div
          *ngIf="statsMode"
          class="col-6 mb-3 pt-1 d-flex align-items-center"
          nbTooltip="Filter by Minimum Traffic through Node"
        >
          <small class="text-muted text-nowrap mb-0 mr-2">Min. Node Traffic:</small>
          <input
            type="range"
            min="0"
            [max]="maxNodeCount"
            [(ngModel)]="minimalNodeCount"
            (change)="updateCount()"
            class="w-100"
          />
        </div>

        <div
          *ngIf="statsMode"
          class="col-6 mb-3 pt-1 d-flex align-items-center"
          nbTooltip="Filter by Minimum Percentage of Transitions"
        >
          <small class="text-muted text-nowrap mb-0 mr-2">Min. Transition %:</small>
          <input
            type="range"
            min="0"
            max="100"
            [(ngModel)]="minimalTransitionPercentage"
            (change)="updateCount()"
            class="w-100"
          />
        </div>

        <div class="col-3 mb-2">
          <nb-select
            fullWidth
            size="small"
            placeholder="Story type filter"
            nbTooltip="Filter by Story Type"
            [(ngModel)]="selectedTypeFilter"
            (selectedChange)="update()"
          >
            <nb-option
              *ngFor="let typeFilter of typeFilters"
              [value]="typeFilter"
              [disabled]="typeFilterCounters.get(typeFilter) < 1"
            >
              <span nbTooltip="{{ typeFilter.description }}">
                {{ typeFilter.name }}
                <span *ngIf="typeFilterCounters.get(typeFilter) > 0"> ({{ typeFilterCounters.get(typeFilter) }})</span></span
              >
            </nb-option>
          </nb-select>
        </div>

        <div class="col-6 mb-2">
          <tock-select-bot
            [allowNoConfigurationSelection]="false"
            noConnectorLabel="All Connectors"
            noConfigurationLabel="All Configurations"
            (selectionChange)="selectedConfigurationChanged($event)"
            [disabled]="showAllConfigurations"
          >
          </tock-select-bot>
        </div>

        <div class="col-3 mb-2 pt-1">
          <nb-checkbox
            [(ngModel)]="showAllConfigurations"
            (change)="changeShowAllConfigurations()"
            nbTooltip="Display all configurations at once (possible performance impact)"
            >Display all configurations</nb-checkbox
          >
        </div>

        <div class="col-3 mb-2">
          <nb-form-field>
            <nb-icon
              nbPrefix
              icon="chat-left"
            ></nb-icon>
            <nb-select
              *ngIf="!statsMode"
              size="small"
              fullWidth
              placeholder="Story Focus"
              nbTooltip="Focus on a particular story"
              [(selected)]="selectedStory"
              (selectedChange)="update()"
            >
              <nb-select-label *ngIf="selectedStory">
                <nb-icon
                  *ngIf="selectedStory.isBuiltIn()"
                  icon="box"
                  class="align-middle mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="selectedStory.isSimpleAnswer()"
                  icon="chat-left"
                  class="align-middle mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="selectedStory.isScriptAnswer()"
                  icon="code"
                  class="align-middle mr-1"
                ></nb-icon>
                {{ selectedStory.storyName }}
              </nb-select-label>

              <nb-option [value]="undefined">All</nb-option>

              <nb-option
                *ngFor="let entry of storiesById | keyvalue"
                [value]="entry.value"
                [disabled]="!selectedTypeFilter.filter(entry.value)"
                class="align-items-center"
              >
                <nb-icon
                  *ngIf="entry.value.isBuiltIn()"
                  nbTooltip="BuiltIn"
                  icon="box"
                  class="mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="entry.value.isSimpleAnswer()"
                  nbTooltip="Message"
                  icon="chat-left"
                  class="mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="entry.value.isScriptAnswer()"
                  nbTooltip="Script"
                  icon="code"
                  class="mr-1"
                ></nb-icon>
                {{ entry.value.name }}
              </nb-option>
            </nb-select>
            <nb-select
              *ngIf="statsMode"
              size="small"
              fullWidth
              placeholder="Story Focus"
              nbTooltip="Focus on a particular story"
              [(ngModel)]="selectedStory"
              (selectedChange)="update()"
            >
              <nb-select-label *ngIf="selectedStory">
                <nb-icon
                  *ngIf="selectedStory.isBuiltIn()"
                  icon="box"
                  class="align-middle mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="selectedStory.isSimpleAnswer()"
                  icon="chat-left"
                  class="align-middle mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="selectedStory.isScriptAnswer()"
                  icon="code"
                  class="align-middle mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="selectedStory.storyType === undefined"
                  icon="question-circle"
                  class="align-middle mr-1"
                ></nb-icon>
                <span class="story-label">{{ selectedStory.storyName }}</span>
              </nb-select-label>

              <nb-option [value]="undefined">All</nb-option>

              <nb-option
                *ngFor="let entry of nodesById | keyvalue"
                [value]="entry.value"
                [disabled]="!selectedTypeFilter.filter(entry.value)"
                class="align-items-center"
              >
                <nb-icon
                  *ngIf="entry.value.isBuiltIn()"
                  nbTooltip="BuiltIn"
                  icon="box"
                  class="mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="entry.value.isSimpleAnswer()"
                  nbTooltip="Message"
                  icon="chat-left"
                  class="mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="entry.value.isScriptAnswer()"
                  nbTooltip="Script"
                  icon="code"
                  class="mr-1"
                ></nb-icon>
                <nb-icon
                  *ngIf="entry.value.storyType === undefined"
                  nbTooltip="Unknown Type"
                  icon="question-circle"
                  class="mr-1"
                ></nb-icon>
                {{ entry.value.storyName }}
              </nb-option>
            </nb-select>
          </nb-form-field>
        </div>

        <div
          class="col-3 mb-2"
          *ngIf="selectedStory"
        >
          <nb-select
            size="small"
            fullWidth
            placeholder="Direction : Both"
            nbTooltip="Choose direction"
            [(ngModel)]="direction"
            (selectedChange)="update()"
          >
            <nb-option [value]="undefined">Direction : Both</nb-option>
            <nb-option [value]="-1">Direction : Outcoming</nb-option>
            <nb-option [value]="1">Direction : Incoming</nb-option>
          </nb-select>
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="entity"
            (change)="update()"
            nbTooltip="View more Nodes by Entity values"
            >Entity</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="step"
            (change)="update()"
            nbTooltip="View more Nodes by Step"
            >Step</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="intent"
            (change)="update()"
            nbTooltip="View more Nodes by Intent"
            >Intent</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="!statsMode"
        >
          <nb-checkbox
            [(ngModel)]="displayDisabled"
            (change)="update()"
            nbTooltip="Include Stories Disabled by Rules"
            >Show disabled stories</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="displayTests"
            (change)="reload()"
            nbTooltip="Include Test Flow"
            >Display tests</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="mergeOldStories"
            (change)="update()"
            nbTooltip="Merge Old Stats to Latest Stories when possible"
            >Merge to latest stories</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="recursive"
            (change)="update()"
            nbTooltip="Display Recursive Transitions from each Node to itself"
            >Display recursive transitions</nb-checkbox
          >
        </div>

        <div class="col-3 mb-2 pt-1">
          <nb-checkbox
            [(ngModel)]="displayNodeType"
            (change)="updateCount()"
            nbTooltip="Display Story Type icon on each Node"
            >Display story type</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="statsMode"
        >
          <nb-checkbox
            [(ngModel)]="displayNodeCount"
            (change)="updateCount()"
            nbTooltip="Display Story trafic on each Node"
            >Display stories traffic</nb-checkbox
          >
        </div>

        <div
          class="col-3 mb-2 pt-1"
          *ngIf="!statsMode"
        >
          <nb-checkbox
            [(ngModel)]="intent"
            (change)="updateCount()"
            nbTooltip="Display Story Main Intent on each Node"
            >Display main intents</nb-checkbox
          >
        </div>

        <div class="col-3 mb-2 pt-1">
          <nb-checkbox
            [(ngModel)]="displayDebug"
            nbTooltip="Display Debug stats"
            >Display debug stats</nb-checkbox
          >
        </div>

        <div
          class="col-6 mb-2 pt-1"
          *ngIf="displayDebug"
        >
          <span *ngIf="nodesById || storiesById"> Total Stories: {{ statsMode ? nodesById.size : storiesById.size }} | </span>
          <span *ngIf="nodesById || storiesById"> Filtered Stories: {{ allNodes.length }} | </span>
          <span *ngIf="allTransitionsSize"> Filtered Transitions: {{ allTransitionsSize }} </span>
        </div>
      </div>
    </div>
  </nb-card-body>
</nb-card>

<nb-card>
  <nb-card-body class="p-0 position-relative">
    <div *ngIf="forceData && layout?.name === 'Force-based'">
      <div
        echarts
        [options]="forceData"
        class="canvas"
        (chartClick)="onEchartsGraphClick($event)"
        (click)="unselect()"
      ></div>
    </div>

    <div *ngIf="circularData && layout?.name === 'Circular'">
      <div
        echarts
        [options]="circularData"
        class="canvas"
        (chartClick)="onEchartsGraphClick($event)"
        (click)="unselect()"
      ></div>
    </div>

    <div *ngIf="sankeyData && layout?.name === 'Sankey'">
      <div
        class="text-center text-warning p-5"
        *ngIf="!statsMode"
      >
        Sankey layout is not suitable for static mode
      </div>
      <div
        echarts
        [options]="sankeyData"
        class="canvas"
        *ngIf="statsMode"
      ></div>
    </div>

    <div
      *ngIf="selectedNode"
      [@inOutRightAnimation]
      class="right-panel scrollable"
    >
      <tock-story
        [storyNode]="selectedNode"
        [botId]="state.currentApplication.name"
        [displayCount]="statsMode"
        (closeStory)="unselect()"
      ></tock-story>
    </div>
  </nb-card-body>
</nb-card>
