<!--
  ~ Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<div
  class="drag-drop-list-beta-container"
  [ngClass]="{ source: isSourceList, target: !isSourceList, sortable: manualSorting, multiline: isMultiline }"
>
  <cdk-virtual-scroll-viewport [itemSize]="15" class="scroll-viewport">
    <mat-selection-list
      #selectionList
      cdkDropList
      class="item-selection-list"
      [cdkDropListData]="items"
      (cdkDropListDropped)="onDrop($event)"
    >
      <ng-container *ngFor="let elem of items">
        <div
          class="display-flex"
          cdkDrag
          [cdkDragData]="elem"
          (cdkDragStarted)="onDragStarted($event)"
          (cdkDragEnded)="onDragEnded($event)"
        >
          <mat-list-option
            #option
            class="item"
            [selected]="elem.selected"
            checkboxPosition="before"
            [ngClass]="{ selected: elem.selected, dragging: elem.dragging }"
            (dblclick)="onDoubleClick(elem)"
            (click)="onSelectionChange(option.selected, elem)"
          >
            <mat-checkbox
              type="checkbox"
              [class.mat-mdc-checkbox-checked]="elem.selected"
              (dblclick)="onDoubleClick(elem)"
            ></mat-checkbox>
            <span class="item-label" *ngIf="!itemTemplate; else customTemplate">
              {{ elem.label }}
            </span>
            <ng-template #customTemplate>
              <ng-container *ngTemplateOutlet="itemTemplate; context: getItemContext(elem.value)"></ng-container>
            </ng-template>

            <div *cdkDragPreview class="drag-preview-beta-container">
              <mat-selection-list class="item-selection-list">
                <ng-container *ngFor="let elem of selectedPreviewItems()">
                  <div class="display-flex">
                    <mat-list-option class="item" [selected]="true" checkboxPosition="before">
                      <mat-checkbox type="checkbox" [(ngModel)]="elem.selected"></mat-checkbox>
                      <span class="item-label" *ngIf="!itemTemplate">
                        {{ elem.label }}
                      </span>
                      <ng-container *ngIf="itemTemplate">
                        <ng-container
                          *ngTemplateOutlet="itemTemplate; context: getItemContext(elem.value)"
                        ></ng-container>
                      </ng-container>
                    </mat-list-option>
                    <button bciIntegratedButton mat-icon-button *ngIf="isSourceList">
                      <mat-icon fontIcon="bosch-ic-add"></mat-icon>
                    </button>
                    <button bciIntegratedButton mat-icon-button *ngIf="!isSourceList">
                      <mat-icon fontIcon="bosch-ic-less-minimize"></mat-icon>
                    </button>
                  </div>
                </ng-container>
                <mat-list-item class="item" checkboxPosition="before" *ngIf="remainingPreviewItems() > 0">
                  <span>{{ picklistIntl.dragPreviewItemLabel(remainingPreviewItems()) }}</span>
                </mat-list-item>
              </mat-selection-list>
            </div>
            <div *cdkDragPlaceholder class="drag-placeholder"></div>
          </mat-list-option>

          <button
            bciIntegratedButton
            mat-icon-button
            *ngIf="isSourceList"
            (click)="onDoubleClick(elem)"
            [ngClass]="{ dragging: elem.dragging }"
          >
            <mat-icon fontIcon="bosch-ic-add"></mat-icon>
          </button>
          <button
            bciIntegratedButton
            mat-icon-button
            *ngIf="!isSourceList"
            (click)="onDoubleClick(elem)"
            [ngClass]="{ dragging: elem.dragging }"
          >
            <mat-icon fontIcon="bosch-ic-less-minimize"></mat-icon>
          </button>
        </div>
      </ng-container>
    </mat-selection-list>
  </cdk-virtual-scroll-viewport>
  <div
    class="drop-zone-overlay flex-column flex-layout-center-center"
    [ngClass]="{ active: highlightDropArea, empty: !highlightDropArea && items.length === 0 }"
  >
    <ng-container *ngIf="items.length === 0">
      <mat-icon fontIcon="bosch-ic-dragdrop" class="m-b-8"></mat-icon>
      <div [innerHTML]="dropOverlayPlaceholder"></div>
    </ng-container>
  </div>
</div>
