<!--
  ~ Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->
<ng-container [ngSwitch]="isMobile$ | async">
  <!-- For Desktop/Tablet View -->
  <div class="picklist-container flex-column" *ngSwitchCase="false">
    <!-- Source/target headers & Source/target sort -->
    <div class="title flex-row flex-none">
      <div class="source-title-container">
        <div>{{ sourceFilterHeader }} ({{ getSourceItemCount() }})</div>
        <div *ngIf="showSort">
          <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="sourceSort" aria-label="Open sort menu">
            <mat-icon fontIcon="Bosch-Ic-sort-alphabetically"></mat-icon>
          </button>
          <mat-menu #sourceSort="matMenu" class="picklistMenu" xPosition="before">
            <div mat-menu-item class="labeled-divider"><span>Alphabetically</span></div>
            <mat-radio-group name="sourceSorting" [(ngModel)]="sourceSorting" (change)="setSourceSorting($event)">
              <div mat-menu-item>
                <mat-radio-button name="sourceSorting" value="asc" [class.mat-radio-checked]="sourceSorting === 'asc'"
                  >Ascending</mat-radio-button
                >
              </div>
              <div mat-menu-item>
                <mat-radio-button name="sourceSorting" value="desc" [class.mat-radio-checked]="sourceSorting === 'desc'"
                  >Descending</mat-radio-button
                >
              </div>
            </mat-radio-group>
          </mat-menu>
        </div>
      </div>
      <div class="spacer"></div>
      <div class="target-title-container">
        <div>{{ targetFilterHeader }} ({{ getTargetItemCount() }})</div>
        <div *ngIf="showSort">
          <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="targetSort" aria-label="Open sort menu">
            <mat-icon fontIcon="Bosch-Ic-sort-alphabetically"></mat-icon>
          </button>
          <mat-menu #targetSort="matMenu" class="picklistMenu" xPosition="before">
            <div mat-menu-item class="labeled-divider"><span>Alphabetically</span></div>
            <mat-radio-group name="targetSorting" [(ngModel)]="targetSorting" (change)="setTargetSorting($event)">
              <div mat-menu-item>
                <mat-radio-button name="targetSorting" value="asc" [class.mat-radio-checked]="targetSorting === 'asc'"
                  >Ascending</mat-radio-button
                >
              </div>
              <div mat-menu-item>
                <mat-radio-button name="targetSorting" value="desc" [class.mat-radio-checked]="targetSorting === 'desc'"
                  >Descending</mat-radio-button
                >
              </div>
            </mat-radio-group>
          </mat-menu>
        </div>
      </div>
    </div>
    <!-- Source/target Filters & Source/target Lists & Selection buttons -->
    <div class="content flex-column flex-grow">
      <!-- Source/target Filters  -->
      <div class="filters-container flex-row flex-none" *ngIf="!disableFilter">
        <!-- Source filter -->
        <ng-container *ngIf="!disableFilter; else noFilterTemplate">
          <mat-form-field
            *ngIf="!customFilterTemplate; else customSourceFilter"
            [class.hidden]="disableFilter"
            class="filter-form-field flex-fill flex-grow"
            appearance="fill"
          >
            <input
              matInput
              #availableFilter
              (keyup)="sourceFilterKeyup.emit(availableFilter.value)"
              [disabled]="!isSourceFilterActive"
              [placeholder]="picklistIntl.sourceFilterPlaceholder"
            />
            <button mat-icon-button matSuffix>
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
          </mat-form-field>
          <ng-template #customSourceFilter>
            <ng-container *ngTemplateOutlet="customFilterTemplate"></ng-container>
          </ng-template>
        </ng-container>
        <div class="spacer"></div>
        <!-- Target filter -->
        <ng-container *ngIf="!disableFilter; else noFilterTemplate">
          <mat-form-field
            *ngIf="!customFilterTemplate; else customTargetFilter"
            [class.hidden]="disableFilter"
            class="filter-form-field flex-fill flex-grow"
            appearance="fill"
          >
            <input
              matInput
              #selectedFilter
              (keyup)="targetFilterKeyup.emit(selectedFilter.value)"
              [disabled]="!isTargetFilterActive"
              [placeholder]="picklistIntl.targetFilterPlaceholder"
            />

            <!-- [disabled]="!isTargetItemsAvailable" -->
            <button mat-icon-button matSuffix>
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
          </mat-form-field>
          <ng-template #customTargetFilter>
            <ng-container *ngTemplateOutlet="customFilterTemplate"></ng-container>
          </ng-template>
        </ng-container>
        <ng-template #noFilterTemplate>
          <!-- Empty placeholder required otherwise flex layout will break -->
          <div class="flex-fill flex-grow"></div>
        </ng-template>
      </div>
      <!-- Source/target Lists  -->
      <div class="lists-container flex-row flex-grow flex-layout-start-strech" cdkDropListGroup>
        <!-- Source list -->
        <bci-core-drag-drop-list
          class="flex-none"
          responsibility="source"
          [isMultiline]="isMultiLineElement"
          [itemTemplate]="sourceItemTemplate"
          [(CoreDragInstance)]="CoreDragState"
          [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
        ></bci-core-drag-drop-list>
        <!-- Add/remove buttons -->
        <div class="arrow-buttons flex-column flex-layout-center-center">
          <button
            [disabled]="!isSomeSourceItemSelected || wouldSourceSelectionExceedTargetItemsMaxLimit"
            bciTertiaryButton
            mat-icon-button
            (click)="onAddSelected()"
            [matTooltip]="picklistIntl.addSelection"
            data-test="picklist-add-selection-button"
          >
            <mat-icon class="Bosch-Ic-arrow-expand-right arrow-icon"></mat-icon>
          </button>
          <button
            [disabled]="!isSomeTargetItemSelected"
            bciTertiaryButton
            mat-icon-button
            (click)="onRemoveSelected()"
            [matTooltip]="picklistIntl.removeSelection"
            data-test="picklist-remove-selection-button"
          >
            <mat-icon fontIcon="Bosch-Ic-arrow-expand-left"></mat-icon>
          </button>
        </div>
        <!-- Target list -->
        <bci-core-drag-drop-list
          class="flex-none"
          responsibility="target"
          [manualSorting]="!showSort"
          [isMultiline]="isMultiLineElement"
          [(CoreDragInstance)]="CoreDragState"
          [itemTemplate]="targetItemTemplate"
          [dropSelfDisabled]="dropSelfTargetDisabled"
          [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
        ></bci-core-drag-drop-list>
      </div>
      <!-- Source/target Selection buttons  -->
      <div class="selection-buttons flex-row flex-none">
        <!-- Source Selection buttons -->
        <div class="flex-row-wrap grow">
          <button
            bciTertiaryButton
            [ngClass]="{ disabled: !isSourceItemsAvailable }"
            (click)="onSelectAll('source')"
            *ngIf="!showSourceDeselectAllButton"
          >
            {{ picklistIntl.selectAll }}
          </button>
          <button
            bciTertiaryButton
            [ngClass]="{ disabled: !isSomeSourceItemSelected }"
            (click)="onDeselectAll('source')"
            *ngIf="showSourceDeselectAllButton"
          >
            {{ picklistIntl.deselectAll }}
          </button>
          <button bciTertiaryButton [ngClass]="{ disabled: isAddAllButtonDisabled() }" (click)="onAddAll()">
            {{ picklistIntl.addAll }}
          </button>
        </div>
        <div class="spacer"></div>
        <!-- Target Selection buttons -->
        <div class="flex-row-wrap grow">
          <button
            bciTertiaryButton
            [ngClass]="{ disabled: !isTargetItemsAvailable }"
            (click)="onSelectAll('target')"
            *ngIf="!showTargetDeselectAllButton"
          >
            {{ picklistIntl.selectAll }}
          </button>
          <button
            bciTertiaryButton
            [ngClass]="{ disabled: !isSomeTargetItemSelected }"
            (click)="onDeselectAll('target')"
            *ngIf="showTargetDeselectAllButton"
          >
            {{ picklistIntl.deselectAll }}
          </button>
          <button bciTertiaryButton [ngClass]="{ disabled: !isTargetItemsAvailable }" (click)="onRemoveAll()">
            {{ picklistIntl.removeAll }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- For Mobile View -->
  <div class="picklist-container flex-column" *ngSwitchCase="true">
    <!-- Source headers -->
    <div class="title">
      <div class="source-title-container">
        <div>{{ sourceFilterHeader }} ({{ getSourceItemCount() }})</div>
        <div *ngIf="showSort">
          <button
            bciIntegratedButton
            mat-icon-button
            [matMenuTriggerFor]="sourceMobileSort"
            aria-label="Open sort menu"
          >
            <mat-icon fontIcon="Bosch-Ic-sort-alphabetically"></mat-icon>
          </button>
          <mat-menu #sourceMobileSort="matMenu" class="picklistMenu" xPosition="before">
            <div mat-menu-item class="labeled-divider"><span>Alphabetically</span></div>
            <mat-radio-group name="sourceSorting" [(ngModel)]="sourceSorting" (change)="setSourceSorting($event)">
              <div mat-menu-item>
                <mat-radio-button name="sourceSorting" value="asc" [class.mat-radio-checked]="sourceSorting === 'asc'"
                  >Ascending</mat-radio-button
                >
              </div>
              <div mat-menu-item>
                <mat-radio-button name="sourceSorting" value="desc" [class.mat-radio-checked]="sourceSorting === 'desc'"
                  >Descending</mat-radio-button
                >
              </div>
            </mat-radio-group>
          </mat-menu>
        </div>
      </div>
    </div>
    <!-- Source filter -->
    <div class="content">
      <div class="filters-container" *ngIf="!disableFilter">
        <ng-container *ngIf="!disableFilter; else noFilterTemplate">
          <mat-form-field
            *ngIf="!customFilterTemplate; else customSourceFilter"
            [class.hidden]="disableFilter"
            class="filter-form-field flex-grow flex-fill"
            appearance="fill"
          >
            <input
              matInput
              #availableFilter
              (keyup)="sourceFilterKeyup.emit(availableFilter.value)"
              [disabled]="!isSourceFilterActive"
              [placeholder]="picklistIntl.sourceFilterPlaceholder"
            />
            <button mat-icon-button matSuffix>
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
          </mat-form-field>
          <ng-template #customSourceFilter>
            <ng-container *ngTemplateOutlet="customFilterTemplate"></ng-container>
          </ng-template>
        </ng-container>
        <ng-template #noFilterTemplate>
          Empty placeholder required otherwise flex layout will break
          <div class="flex-grow flex-fill"></div>
        </ng-template>
      </div>
    </div>
    <!-- Source list -->
    <div class="lists-container" cdkDropListGroup>
      <bci-core-drag-drop-list
        class="flex-none"
        responsibility="source"
        [isMultiline]="isMultiLineElement"
        [itemTemplate]="sourceItemTemplate"
        [(CoreDragInstance)]="CoreDragState"
        [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
      ></bci-core-drag-drop-list>
    </div>
    <!-- Source Selection buttons -->
    <div class="selection-buttons">
      <div class="flex-row-wrap grow">
        <button
          bciTertiaryButton
          [ngClass]="{ disabled: !isSourceItemsAvailable }"
          (click)="onSelectAll('source')"
          *ngIf="!showSourceDeselectAllButton"
        >
          {{ picklistIntl.selectAll }}
        </button>
        <button
          bciTertiaryButton
          [ngClass]="{ disabled: !isSomeSourceItemSelected }"
          (click)="onDeselectAll('source')"
          *ngIf="showSourceDeselectAllButton"
        >
          {{ picklistIntl.deselectAll }}
        </button>
        <button
          bciTertiaryButton
          class="selection-link-button"
          [ngClass]="{ disabled: !isSourceItemsAvailable }"
          (click)="onAddAll()"
        >
          {{ picklistIntl.addAll }}
        </button>
      </div>
    </div>

    <!-- Arrow Buttons -->
    <div class="arrow-buttons flex-row flex-layout-center-center">
      <button
        [disabled]="!isSomeSourceItemSelected || wouldSourceSelectionExceedTargetItemsMaxLimit"
        bciTertiaryButton
        mat-icon-button
        (click)="onAddSelected()"
        [matTooltip]="picklistIntl.addSelection"
        data-test="picklist-add-selection-button"
      >
        <mat-icon class="Bosch-Ic-arrow-expand-down arrow-icon"></mat-icon>
      </button>
      <button
        [disabled]="!isSomeTargetItemSelected"
        bciTertiaryButton
        mat-icon-button
        (click)="onRemoveSelected()"
        [matTooltip]="picklistIntl.removeSelection"
        data-test="picklist-remove-selection-button"
      >
        <mat-icon fontIcon="Bosch-Ic-arrow-expand-up"></mat-icon>
      </button>
    </div>

    <!-- Target headers -->
    <div class="title">
      <div class="target-title-container">
        <div>{{ targetFilterHeader }} ({{ getTargetItemCount() }})</div>
        <div *ngIf="showSort">
          <button
            bciIntegratedButton
            mat-icon-button
            [matMenuTriggerFor]="targetMobileSort"
            aria-label="Open sort menu"
          >
            <mat-icon fontIcon="Bosch-Ic-sort-alphabetically"></mat-icon>
          </button>
          <mat-menu #targetMobileSort="matMenu" class="picklistMenu" xPosition="before">
            <div mat-menu-item class="labeled-divider"><span>Alphabetically</span></div>
            <mat-radio-group name="targetSorting" [(ngModel)]="targetSorting" (change)="setSourceSorting($event)">
              <div mat-menu-item>
                <mat-radio-button name="targetSorting" value="asc" [class.mat-radio-checked]="targetSorting === 'asc'"
                  >Ascending</mat-radio-button
                >
              </div>
              <div mat-menu-item>
                <mat-radio-button name="targetSorting" value="desc" [class.mat-radio-checked]="targetSorting === 'desc'"
                  >Descending</mat-radio-button
                >
              </div>
            </mat-radio-group>
          </mat-menu>
        </div>
      </div>
    </div>
    <!-- Target filter -->
    <div class="content">
      <div class="filters-container" *ngIf="!disableFilter">
        <ng-container *ngIf="!disableFilter; else noFilterTemplate">
          <mat-form-field
            *ngIf="!customFilterTemplate; else customTargetFilter"
            [class.hidden]="disableFilter"
            class="filter-form-field flex-grow flex-fill"
            appearance="fill"
          >
            <input
              matInput
              #selectedFilter
              (keyup)="targetFilterKeyup.emit(selectedFilter.value)"
              [disabled]="!isTargetFilterActive"
              [placeholder]="picklistIntl.targetFilterPlaceholder"
            />
            <button mat-icon-button matSuffix>
              <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
            </button>
          </mat-form-field>
          <ng-template #customTargetFilter>
            <ng-container *ngTemplateOutlet="customFilterTemplate"></ng-container>
          </ng-template>
        </ng-container>
        <ng-template #noFilterTemplate>
          Empty placeholder required otherwise flex layout will break
          <div class="flex-grow flex-fill"></div>
        </ng-template>
      </div>
    </div>
    <!-- Target list -->
    <div class="lists-container" cdkDropListGroup>
      <bci-core-drag-drop-list
        class="flex-none"
        responsibility="target"
        [manualSorting]="!showSort"
        [isMultiline]="isMultiLineElement"
        [(CoreDragInstance)]="CoreDragState"
        [itemTemplate]="targetItemTemplate"
        [dropSelfDisabled]="dropSelfTargetDisabled"
        [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
      ></bci-core-drag-drop-list>
    </div>
    <!-- Target Selection buttons -->
    <div class="selection-buttons">
      <div class="flex-row-wrap grow">
        <button
          bciTertiaryButton
          [ngClass]="{ disabled: !isTargetItemsAvailable }"
          (click)="onSelectAll('target')"
          *ngIf="!showTargetDeselectAllButton"
        >
          {{ picklistIntl.selectAll }}
        </button>
        <button
          bciTertiaryButton
          [ngClass]="{ disabled: !isSomeTargetItemSelected }"
          (click)="onDeselectAll('target')"
          *ngIf="showTargetDeselectAllButton"
        >
          {{ picklistIntl.deselectAll }}
        </button>
        <button
          bciTertiaryButton
          class="selection-link-button"
          [ngClass]="{ disabled: !isTargetItemsAvailable }"
          (click)="onRemoveAll()"
        >
          {{ picklistIntl.removeAll }}
        </button>
      </div>
    </div>
  </div>
</ng-container>
