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

<div class="d-flex flex-wrap align-items-center mt-3">
  <h1 class="flex-grow-1">
    Users
    <span
      *ngIf="formattedTotal()"
      class="font-weight-normal"
      >({{ formattedTotal() }})</span
    >
  </h1>

  <button
    nbButton
    ghost
    shape="round"
    nbTooltip="Refresh dialogs"
    (click)="reload()"
    class="ml-2"
  >
    <nb-icon icon="arrow-clockwise"></nb-icon>
  </button>
</div>

<nb-card class="mb-3">
  <nb-card-body class="d-flex gap-1 align-items-end justify-content-between">
    <div class="w-50">
      <nb-form-field>
        <nb-icon
          nbPrefix
          icon="calendar-plus"
        ></nb-icon>
        <input
          nbInput
          fullWidth
          fieldSize="small"
          placeholder="Data collected after"
          [nbDatepicker]="from_date"
          [(ngModel)]="filter.from"
        />
      </nb-form-field>
      <nb-datepicker
        (dateChange)="changeAfter()"
        #from_date
      ></nb-datepicker>
    </div>

    <div class="w-50">
      <nb-form-field>
        <nb-icon
          nbPrefix
          icon="calendar-minus"
        ></nb-icon>
        <input
          nbInput
          fullWidth
          fieldSize="small"
          placeholder="Data collected before"
          [nbDatepicker]="to_date"
          [(ngModel)]="filter.to"
        />
      </nb-form-field>
      <nb-datepicker
        (dateChange)="changeBefore()"
        #to_date
      ></nb-datepicker>
    </div>

    <nb-toggle
      nbTooltip="{{ !filter.displayTests ? 'Display tests' : 'Hide tests' }}"
      [(ngModel)]="filter.displayTests"
      (change)="waitAndRefresh()"
      class="nb-toggle-reset-label-margin text-nowrap"
    >
      Display tests
    </nb-toggle>
  </nb-card-body>
</nb-card>

<tock-no-data-found
  *ngIf="!loading && !data?.length"
  title="No records found"
></tock-no-data-found>

<div
  *ngIf="data.length"
  [nbSpinner]="loading"
  class="min-vh-100"
>
  <div class="d-flex gap-1">
    <div
      class="messages-col position-relative"
      infinite-scroll
      [infiniteScrollDistance]="1"
      (scrolled)="load()"
      [scrollWindow]="false"
      [nbSpinner]="loading"
    >
      <nb-card
        *ngFor="let user of data"
        [accent]="user.playerId === selectedUser?.playerId ? 'info' : ''"
        class="m-0"
      >
        <nb-card-header
          (click)="loadDialog(user)"
          class="d-flex align-items-center justify-content-between pointer"
        >
          <nb-user
            size="large"
            name="{{ user.userPreferences.firstName ? user.userPreferences.firstName : 'Anonymous' }} {{ user.userPreferences.lastName }}"
            title="{{ user.lastUpdateDate | amDateFormat: 'DD MMM YYYY HH:mm' }}"
            picture="{{ getUserPicture(user) }}"
          >
          </nb-user>
          <img
            *ngIf="getConnector(user.applicationIds[0])"
            src="{{ getConnector(user.applicationIds[0]).iconUrl() }}"
            class="connector"
            [nbTooltip]="getConnector(user.applicationIds[0]).label()"
          />
        </nb-card-header>

        <nb-card-body>
          <div>
            <span *ngIf="user.botConfiguration">[{{ user.botConfiguration.name }} - {{ user.botConfiguration.connectorType.id }}]</span>
            <span *ngIf="user.userPreferences.locale">({{ user.userPreferences.locale }})</span>
            <span
              class="text-muted"
              *ngIf="user.lastActionText"
            >
              {{ user.lastActionText }}</span
            >
          </div>

          <div
            class="tag pointer"
            *ngFor="let f of user.userState.flags"
            [selected]="containsFlag(f)"
            color="accent"
            (click)="toggleFlag(f)"
            nbTooltip="Filter by flag {{ f }}"
          >
            {{ f }}
          </div>
        </nb-card-body>
      </nb-card>
    </div>

    <nb-card
      class="flex-grow-1 mn-0"
      [nbSpinner]="loadingDialog"
    >
      <nb-card-header class="position-relative p-0">
        <tock-chat-ui
          *ngIf="selectedUser && selectedUser.displayDialogs && selectedUser.userDialog"
          height="calc(100vh - 350px)"
          padding="1em 0.5em 1em 1em"
        >
          <tock-chat-ui-message
            *ngFor="let action of selectedUser.userDialog.actions"
            [message]="action.message"
            [date]="action.date"
            [reply]="action.isBot()"
            [replay]="true"
            [sender]="getUserName(action)"
            [avatar]="getUserAvatar(action)"
            [applicationId]="action.applicationId"
          >
          </tock-chat-ui-message>
        </tock-chat-ui>

        <div class="shader"></div>
      </nb-card-header>

      <nb-card-body
        class="d-flex align-items-center"
        *ngIf="
          selectedUser?.displayDialogs &&
          selectedUser?.userDialog &&
          selectedUser.userDialog.actions.length !== 0 &&
          selectedUser.testPlans &&
          selectedUser.testPlans.length !== 0
        "
      >
        <nb-select
          fullWidth
          size="small"
          [(ngModel)]="selectedPlanId"
          placeholder="Add dialog to Test Plan"
        >
          <nb-option
            *ngFor="let plan of selectedUser.testPlans"
            [value]="plan._id"
            >{{ plan.name }}
          </nb-option>
        </nb-select>
        <button
          nbButton
          size="small"
          (click)="addDialogToTestPlan(selectedPlanId, selectedUser.userDialog)"
          ghost="true"
          nbTooltip="Add dialog to Test Plan"
        >
          <nb-icon icon="plus-circle"></nb-icon>
        </button>
      </nb-card-body>
    </nb-card>
  </div>
</div>
