<!--
  ~ Copyright (c) 2021 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
-->
<div class="flex-container align-style flex-style-no-stretch">
  <div class="filecounter">
    <p *ngIf="selectedFiles?.length === 0 || selectedFiles?.length > 1" class="file-heading">
      {{ selectedFiles?.length }} {{ bciMultiFileSelectIntl.items }}
    </p>
    <p *ngIf="selectedFiles?.length === 1" class="file-heading">
      {{ selectedFiles?.length }} {{ bciMultiFileSelectIntl.item }}
    </p>
  </div>
  <button
    bciTertiaryButton
    (click)="fileInput.click()"
    [ngClass]="{ disabled: isFileSelectionDisabled() }"
    [matTooltipDisabled]="!isFileSelectionDisabled()"
    matTooltip="{{ bciMultiFileSelectIntl.addButtonDisabledTooltip }}"
  >
    <mat-icon fontIcon="bosch-ic-add"></mat-icon>{{ bciMultiFileSelectIntl.addButtonLabel }}
  </button>

  <!-- The value of fileInput is set to null on click in order to solve an issue that prevents the event propagation in case a file with the same name is multiple times  -->
  <!-- The issue would not only occur if the file already exists in the list but also if it was deleted in the meanwhile -->
  <input
    #fileInput
    [multiple]="allowMultipleFileSelection"
    (change)="handleFileChange($event)"
    (click)="fileInput.value = null"
    [disabled]="isFileSelectionDisabled()"
    accept="{{ allowedFileTypes?.join(JOIN_STRING_SEPARATOR) }}"
    data-test="multiFileSelect.addFileButton"
    hidden
    type="file"
  />
</div>

<div *ngIf="bciMultiFileSelectIntl.description" class="description flex-style-no-stretch">
  <span>{{ bciMultiFileSelectIntl.description }}</span>
</div>
<div
  *ngIf="selectedFiles?.length > 0"
  data-test="multiFileSelect.filesContainer"
  (dragover)="handleDragOver($event)"
  (drop)="handleFileDrop($event)"
  class="flex-style-no-stretch"
  #fileCardContainer
>
  <div *ngIf="fileCardContainer.offsetWidth > 480" class="flex-direction-column">
    <mat-card
      [bciCardColorState]="''"
      [bciCardHorizontal]="true"
      *ngFor="let file of selectedFiles"
      class="horizontal-card"
    >
      <mat-card-content class="column-gap no-padding">
        <bci-label-value-pair class="card-column filename" [label]="bciMultiFileSelectIntl.fileNameLabel"
          ><span data-test="multiFileSelect.filesContainer.fileName">{{ file.name }}</span>
        </bci-label-value-pair>
        <bci-label-value-pair class="card-column" [label]="bciMultiFileSelectIntl.fileTypeLabel"
          ><span data-test="multiFileSelect.filesContainer.fileType">{{
            getFileTypeExtensionFromFileName(file.name) | uppercase
          }}</span>
        </bci-label-value-pair>
        <bci-label-value-pair class="card-column" [label]="bciMultiFileSelectIntl.fileSizeLabel"
          ><span data-test="multiFileSelect.filesContainer.fileSize">{{ file.size | filesize }}</span>
        </bci-label-value-pair>
        <div class="card-column actions">
          <button
            (click)="removeFile(file)"
            data-test="multiFileSelect.filesContainer.removeFileButton"
            bciIntegratedButton
            mat-icon-button
          >
            <mat-icon class="bosch-ic-clickable" fontIcon="Bosch-Ic-delete"></mat-icon>
          </button>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
  <div *ngIf="fileCardContainer.offsetWidth <= 480" class="flex-direction-column">
    <mat-card [bciCardColorState]="''" [bciCardHorizontal]="false" *ngFor="let file of selectedFiles">
      <mat-card-content class="no-padding">
        <div class="small-card-view">
          <bci-label-value-pair [label]="bciMultiFileSelectIntl.fileNameLabel"
            ><span data-test="multiFileSelect.filesContainer.fileName">{{ file.name }}</span>
          </bci-label-value-pair>
          <div class="action">
            <button
              (click)="removeFile(file)"
              data-test="multiFileSelect.filesContainer.removeFileButton"
              bciIntegratedButton
              mat-icon-button
            >
              <mat-icon class="bosch-ic-clickable" fontIcon="Bosch-Ic-delete"></mat-icon>
            </button>
          </div>
        </div>
        <div class="small-card-view column-gap">
          <bci-label-value-pair [label]="bciMultiFileSelectIntl.fileTypeLabel"
            ><span data-test="multiFileSelect.filesContainer.fileType">{{
              getFileTypeExtensionFromFileName(file.name) | uppercase
            }}</span>
          </bci-label-value-pair>
          <bci-label-value-pair [label]="bciMultiFileSelectIntl.fileSizeLabel"
            ><span data-test="multiFileSelect.filesContainer.fileSize">{{ file.size | filesize }}</span>
          </bci-label-value-pair>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
<div
  *ngIf="maximumFiles !== selectedFiles?.length"
  (click)="fileInput.click()"
  class="no-files-added flex-style-stretch"
  (dragover)="handleDragOver($event)"
  (drop)="handleFileDrop($event)"
  #noFilesSelectedContainer
  id="multiFileSelect.dropContainer"
>
  <bci-empty-state
    id="multiFileSelect.dropContainerEmptyState"
    [ngStyle]="{ 'height.px': noFilesSelectedContainer.offsetHeight }"
  >
    <mat-icon fontIcon="bosch-ic-upload"></mat-icon>
    <p data-test="multiFileSelect.noFilesAddedMessage">
      {{ bciMultiFileSelectIntl.noFilesAddedMessage }}
    </p>
  </bci-empty-state>
</div>
