<div class="d-flex flex-wrap">
  <h1 class="flex-grow-1">Documents</h1>

  <section class="d-flex flex-wrap align-items-center">
    <button
      nbButton
      ghost
      shape="round"
      nbTooltip="Refresh answers"
      (click)="refresh()"
      class="ml-2"
    >
      <nb-icon icon="arrow-clockwise"></nb-icon>
    </button>
  </section>
</div>

<tock-no-data-found
  *ngIf="!loading && !fileList?.length"
  title="No document found"
  message="You may create a new one using above button &#34;NEW Story&#34; and add a media message to the story answer."
></tock-no-data-found>

<nb-card
  *ngIf="!loading && fileList?.length"
  class="mb-0"
>
  <nb-card-body>
    <form
      [formGroup]="form"
      class="d-flex gap-1 align-items-center"
    >
      <nb-form-field class="flex-grow-1">
        <nb-icon
          nbPrefix
          icon="search"
        ></nb-icon>
        <input
          nbInput
          fullWidth
          fieldSize="medium"
          placeholder="Search documents"
          type="text"
          formControlName="searchString"
        />
        <button
          nbButton
          nbSuffix
          ghost
          nbTooltip="Clear"
          type="button"
          (click)="resetSearch()"
          *ngIf="searchString.value?.trim().length"
        >
          <nb-icon icon="x-lg"></nb-icon>
        </button>
      </nb-form-field>

      <div>
        <nb-form-field>
          <nb-icon
            nbPrefix
            icon="files"
          ></nb-icon>

          <nb-select
            placeholder="File types"
            fullWidth
            optionsListClass="option-list--break-word"
            formControlName="fileType"
          >
            <nb-option [value]="null">All</nb-option>
            <nb-option
              *ngFor="let type of fileTypes"
              [value]="type.type"
            >
              <span class="initial-capitalize">{{ type.label }}</span>
            </nb-option>
          </nb-select>
        </nb-form-field>
      </div>

      <div *ngIf="getFilesSuffixes().length > 1">
        <nb-form-field>
          <nb-icon
            nbPrefix
            icon="file"
          ></nb-icon>
          <nb-select
            placeholder="File extensions"
            fullWidth
            optionsListClass="option-list--break-word"
            formControlName="fileSuffix"
          >
            <nb-option [value]="null">All</nb-option>
            <nb-option
              *ngFor="let suffix of getFilesSuffixes()"
              [value]="suffix"
            >
              <span class="initial-capitalize">{{ suffix }}</span>
            </nb-option>
          </nb-select>
        </nb-form-field>
      </div>
    </form>
  </nb-card-body>
</nb-card>

<div
  *ngIf="!loading && fileList?.length && !filteredFileList?.length"
  class="p-4 text-center font-style-italic text-muted"
>
  No documents match your search criteria
</div>

<nb-card
  [nbSpinner]="loading"
  *ngIf="filteredFileList?.length"
  class="mt-2"
>
  <nb-card-body class="py-0">
    <div class="table-list table-list-header">
      <div class="table-list-entry">Story</div>
      <div class="table-list-entry bordered text-center">Category</div>
      <div class="table-list-entry bordered text-center">File</div>
      <div class="table-list-entry bordered text-center">File title</div>
      <div class="table-list-entry bordered text-center">File type</div>
      <div class="table-list-entry text-center">Actions</div>
    </div>

    <div
      class="table-list"
      *ngFor="let file of filteredFileList"
    >
      <div class="table-list-entry">
        <div class="font-weight-bold">
          <nb-icon
            class="align-middle"
            nbTooltip="{{ getStoryType(getStoryWithThisMediaFile(file)) }} Story"
            [icon]="getStoryIcon(getStoryWithThisMediaFile(file))"
          ></nb-icon>
          {{ getStoryWithThisMediaFile(file)?.name }}
        </div>
        <span class="text-muted">{{ getStoryWithThisMediaFile(file)?.description }}</span>
      </div>

      <div class="table-list-entry bordered text-center">
        {{ getStoryWithThisMediaFile(file)?.category }}
      </div>

      <div class="table-list-entry bordered text-center ellipsis">
        <a
          href="{{ file.url(rest.url) }}"
          target="_blank"
          [nbTooltip]="file.name"
        >
          <div *ngIf="file.isImage()">
            <img
              class="img-fluid img-thumbnail image rounded"
              src="{{ file.url(rest.url) }}"
            />
          </div>
          <small>{{ file.name }}</small>
        </a>
      </div>

      <div class="table-list-entry bordered text-center">
        <div
          class="truncate"
          [nbTooltip]="$any(getAnswerWithThisMediaFile(file)?.mediaMessage)?.title?.defaultLabel"
        >
          {{ $any(getAnswerWithThisMediaFile(file)?.mediaMessage)?.title?.defaultLabel }}
        </div>

        <div
          class="truncate"
          [nbTooltip]="$any(getAnswerWithThisMediaFile(file)?.mediaMessage)?.subTitle?.defaultLabel"
        >
          <small>
            {{ $any(getAnswerWithThisMediaFile(file)?.mediaMessage)?.subTitle?.defaultLabel }}
          </small>
        </div>
      </div>

      <div class="table-list-entry bordered text-center">
        <ng-container *ngIf="file.externalUrl"> Link </ng-container>

        <ng-container *ngIf="!file.externalUrl">
          <container-element [ngSwitch]="file.suffix">
            <nb-icon
              *ngSwitchCase="'pdf'"
              icon="filetype-pdf"
            ></nb-icon>
            <nb-icon
              *ngSwitchCase="'bmp'"
              icon="filetype-bmp"
            ></nb-icon>
            <nb-icon
              *ngSwitchCase="'png'"
              icon="filetype-png"
            ></nb-icon>
            <nb-icon
              *ngSwitchCase="'jpg'"
              icon="filetype-jpg"
            ></nb-icon>
            <nb-icon
              *ngSwitchCase="'jpeg'"
              icon="filetype-jpg"
            ></nb-icon>
            <nb-icon
              *ngSwitchCase="'gif'"
              icon="filetype-gif"
            ></nb-icon>
          </container-element>

          <ng-container [ngSwitch]="file.type">
            <span *ngSwitchCase="attachmentType.image">Image</span>
            <span *ngSwitchCase="attachmentType.audio">Audio file</span>
            <span *ngSwitchCase="attachmentType.video">Video file</span>
            <span *ngSwitchDefault>Other</span>
          </ng-container>
          ({{ file.suffix }})
        </ng-container>
      </div>

      <div class="table-list-entry text-center">
        <button
          nbButton
          ghost
          shape="round"
          status="info"
          nbTooltip="Edit"
          (click)="displayMediaMessage(file)"
        >
          <nb-icon icon="pencil"></nb-icon>
        </button>
      </div>
    </div>
  </nb-card-body>
</nb-card>

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