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

<bci-page-content>
  <h2 class="page-heading">Dropdown (Beta)</h2>
  <bci-callout type="info" class="page-callout">
    <strong>Feedback wanted!</strong>
    <p>
      <strong>Why is there a new component?</strong>
      <br />
      This demo uses the <code>&lt;bci-select&gt;</code> component, instead of the previously used
      <code>&lt;mat-select&gt;</code>.<br />
      With our own implementation of the select component, we fixed some UX-related issues and enable the select panel
      to open to the top and to the bottom while using a dynamic width.
      <br /><br />
      <strong>Custom Input Variables:</strong><br />
    </p>
    <ul>
      <li>width: string = Custom width of a select.</li>
      <li>label: string = Label of the select.</li>
      <li>shouldScrollOptions: boolean = whether truncated options should scroll on hover.</li>
      <li>shouldScrollValue: boolean = whether the truncated select value should scroll on hover.</li>
    </ul>
    <p><strong>What to consider when using the bci-select:</strong><br /></p>
    <ul>
      <li>Label is now an input variable of the select.</li>
      <li>Select can now be used without the <code>&lt;mat-form-field&gt;</code> wrapper.</li>
    </ul>
    <p>
      <strong>For a detailed comparison, scroll to the bottom.</strong>
    </p>
  </bci-callout>
  <br />
  <ul>
    <li (click)="scrollIntoViewService.scrollIntoView('basic-section')"><a>Basic examples</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('multiple-section')"><a>Multiple selection</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('option-group-section')"><a>Option groups</a></li>
    <li (click)="scrollIntoViewService.scrollIntoView('other-section')"><a>Other examples</a></li>
  </ul>
  <div class="demo-select">
    <h3 id="basic-section">Basic example</h3>
    <bci-select placeholder="Select" label="Pick an option" [(ngModel)]="currentOption">
      <mat-option value="None">None</mat-option>
      <mat-option value="option-1">Option 1</mat-option>
      <mat-option value="option-3">Option 2 Option 2 Option 2 Option 2</mat-option>
      <mat-option value="option-4">Option 3</mat-option>
      <mat-option value="option-4">Option 4</mat-option>
      <mat-hint [show]="currentOption === 'None' || currentOption === undefined">Please select some option </mat-hint>
    </bci-select>
    <h4>Basic example with dynamic width</h4>
    <input type="text" [(ngModel)]="inputWidth" style="width: 160px" />
    <label> Width in units (ex: 10vh,10rem,10px,10% etc)</label><br />
    <br />
    <bci-select placeholder="Select" label="Pick an option" [width]="inputWidth" [(ngModel)]="currentOptionCustomWidth">
      <mat-option value="option-1">Option 1</mat-option>
      <mat-option value="option-2">Option 2 Option 2 Option 2 Option 2</mat-option>
      <mat-option value="option-3">Option 3</mat-option>
      <mat-option value="option-4">Option 4</mat-option>
    </bci-select>
    <h4>Basic example with scrolling options</h4>
    <bci-select placeholder="Select" label="Pick an option" [(ngModel)]="currentScrollingOption" shouldScrollOptions>
      <mat-option value="option-1">Option 1</mat-option>
      <mat-option value="option-2">Option 2 Option 2 Option 2 Option 2</mat-option>
      <mat-option value="option-3">Option 3</mat-option>
      <mat-option value="option-4">Option 4 Option 4 Option 4 Option 4</mat-option>
    </bci-select>
    <h4>Basic example with scrolling select value</h4>
    <bci-select
      placeholder="Select"
      label="Pick an option"
      [(ngModel)]="currentScrollingTriggerOption"
      shouldScrollValue
    >
      <mat-option value="option-1">Option 1</mat-option>
      <mat-option value="option-2">Option 2 Option 2 Option 2 Option 2</mat-option>
      <mat-option value="option-3">Option 3</mat-option>
      <mat-option value="option-4">Option 4 Option 4 Option 4 Option 4</mat-option>
    </bci-select>
    <h4>Basic example (with notification)</h4>
    <p>
      <bci-select
        placeholder="Select"
        [(ngModel)]="currentNotificationType"
        [required]="notificationTypesRequired"
        [disabled]="notificationTypesDisabled"
        #notificationTypeControl="ngModel"
        label="Notification Type"
      >
        <mat-option>None</mat-option>
        <mat-option
          *ngFor="let notificationType of notificationTypes"
          [value]="notificationType.value"
          [matTooltip]="notificationType.value"
          [disabled]="notificationType.disabled"
        >
          {{ notificationType.viewValue }}
        </mat-option>
        <mat-hint *ngIf="currentNotificationType === 'info'"
          >{{currentNotificationType && capitalizeFirstLetterOfNotificationType()}}
        </mat-hint>
        <mat-hint success *ngIf="currentNotificationType === 'success'"
          >{{currentNotificationType && capitalizeFirstLetterOfNotificationType()}}
        </mat-hint>
        <mat-error warning *ngIf="currentNotificationType === 'warning'"
          >{{currentNotificationType && capitalizeFirstLetterOfNotificationType()}}
        </mat-error>
        <mat-error error *ngIf="currentNotificationType === 'error'"
          >{{currentNotificationType && capitalizeFirstLetterOfNotificationType()}}
        </mat-error>
        <mat-error *ngIf="notificationTypeControl.hasError('required')">You have to select an option</mat-error>
      </bci-select>
    </p>
    <code>
      Value: {{ currentNotificationType }}, Touched: {{ notificationTypeControl.touched }}, Dirty: {{
      notificationTypeControl.dirty }}, Status: {{ notificationTypeControl.control?.status }}
    </code>
    <br /><br />
    <bci-commandbar [showSearch]="false" [showAdd]="false">
      <bci-commandbar-quickfilters>
        <bci-commandbar-item hide="mobile">
          <mat-slide-toggle (click)="switchRequiredNotificationType()">Required</mat-slide-toggle>
        </bci-commandbar-item>
        <bci-commandbar-item hide="mobile">
          <mat-slide-toggle (click)="switchDisableNotificationType()">Disabled</mat-slide-toggle>
        </bci-commandbar-item>
        <bci-commandbar-item hide="mobile">
          <button bciTertiaryButton (click)="currentNotificationType='warning'">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item hide="mobile">
          <button bciTertiaryButton (click)="notificationTypeControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>

    <hr />
    <h3 id="multiple-section">Multiple selection</h3>
    <bci-select
      placeholder="Select"
      multiple
      [(ngModel)]="currentPokemon"
      [required]="pokemonRequired"
      [disabled]="pokemonDisabled"
      #pokemonControl="ngModel"
      label="Pokemon"
    >
      <mat-option *ngFor="let creature of pokemon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
      <mat-error *ngIf="pokemonControl.hasError('required')"> Mandatory field </mat-error>
    </bci-select>
    <br />
    <code>
      Value: {{ currentPokemon }}, Touched: {{ pokemonControl.touched }}, Dirty: {{ pokemonControl.dirty }}, Status: {{
      pokemonControl.control?.status }}
    </code>
    <br /><br />

    <bci-commandbar [showSearch]="false" [showAdd]="false">
      <bci-commandbar-quickfilters>
        <bci-commandbar-item>
          <mat-slide-toggle (click)="switchRequiredPokemon()">Required</mat-slide-toggle>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <mat-slide-toggle (click)="switchPokemonDisabled()">Disabled</mat-slide-toggle>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciTertiaryButton (click)="setPokemonValue()">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciTertiaryButton (click)="pokemonControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>
    <h4>Multiple selection (with disabled options)</h4>

    <bci-select placeholder="Select" multiple [(ngModel)]="currentPokemonDisabled" label="Pokemon">
      <mat-option value="Disabled" disabled> Disabled </mat-option>
      <mat-option value="Disabled Checked" disabled> Disabled Checked</mat-option>
      <mat-option *ngFor="let creature of pokemon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
    </bci-select>
    <h4>Without Angular forms</h4>
    <bci-select placeholder="Select" [(ngModel)]="currentDigimon" label="Digimon" [required]="digimonRequired">
      <mat-option>None</mat-option>
      <mat-option *ngFor="let creature of digimon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
    </bci-select>
    <p>
      <code>Value: {{ currentDigimon }}</code>
    </p>
    <p>
      <bci-commandbar [showSearch]="false" [showAdd]="false">
        <bci-commandbar-quickfilters>
          <bci-commandbar-item>
            <mat-slide-toggle (click)="switchDigimonRequired()">Required</mat-slide-toggle>
          </bci-commandbar-item>
          <bci-commandbar-item>
            <button bciTertiaryButton (click)="currentDigimon='pajiramon-3'">Set Value</button>
          </bci-commandbar-item>
        </bci-commandbar-quickfilters>
      </bci-commandbar>
    </p>

    <hr />
    <h3 id="option-group-section">Option groups</h3>
    <bci-select placeholder="Select" label="Pokemon" [(ngModel)]="currentPokemonFromGroup">
      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.viewValue }}
        </mat-option>
      </mat-optgroup>
    </bci-select>

    <h4>Option groups (Multiple Selection)</h4>
    <bci-select placeholder="Select" label="Pokemon" [(ngModel)]="currentPokemonFromGroupMultiple" multiple>
      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.viewValue }}
        </mat-option>
      </mat-optgroup>
    </bci-select>

    <h4>Option groups (Multiple Selection and disabled options)</h4>
    <bci-select placeholder="Select" label="Pokemon" [(ngModel)]="currentPokemonFromGroupDisabled" multiple>
      <mat-optgroup label="Enabled Option Group">
        <mat-option value="Disabled Option" disabled="true"> Disabled Option </mat-option>
        <mat-option disabled="true"> Disabled Option</mat-option>
      </mat-optgroup>
      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.viewValue }}
        </mat-option>
      </mat-optgroup>
    </bci-select>

    <h4>Option groups with multiple selection, disabled options, scrolling value and scrolling options</h4>
    <bci-select
      placeholder="Select"
      label="Pokemon"
      [(ngModel)]="currentPokemonFromGroupMultipleScrollAll"
      multiple
      shouldScrollValue
      shouldScrollOptions
    >
      <mat-optgroup label="Enabled Option Group">
        <mat-option value="long-scrolling-option"> Long Scrolling Option </mat-option>
        <mat-option disabled> Disabled Option long and scrolling</mat-option>
      </mat-optgroup>
      <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.viewValue }}
        </mat-option>
      </mat-optgroup>
    </bci-select>

    <hr />
    <h3 id="other-section">Other examples</h3>
    <h4>formControl</h4>
    <bci-select placeholder="Select" [formControl]="foodControl" label="Food I like">
      <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</mat-option>
    </bci-select>
    <p>
      Value: {{ foodControl.value }}, Touched: {{ foodControl.touched }}, Dirty: {{ foodControl.dirty }}, Status: {{
      foodControl.status }}
    </p>
    <bci-commandbar [showSearch]="false" [showAdd]="false">
      <bci-commandbar-quickfilters>
        <bci-commandbar-item>
          <mat-slide-toggle (click)="toggleDisabled()">Toggle Disabled</mat-slide-toggle>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciTertiaryButton (click)="foodControl.setValue('pizza-1')">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciTertiaryButton (click)="foodControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>
    <h4>Change event</h4>
    <bci-select placeholder="Select" label="Starter Pokemon" (selectionChange)="latestChangeEvent = $event">
      <mat-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }} </mat-option>
    </bci-select>
    <br />
    <code> Change event value: {{ latestChangeEvent?.value }} </code>
    <h4>Comparison Mat-Select vs. Bci-Select</h4>
    <h5>Mat Select (Angular Material Select)</h5>
    <code>
      <p>&lt;mat-form-field&gt;</p>
      <p style="text-indent: 16px">&lt;mat-label&gt;Pick an option&lt;/mat-label&gt;</p>
      <p style="text-indent: 16px">&lt;mat-select placeholder="Select" [(ngModel)]="currentOption"&gt;</p>
      <p style="text-indent: 32px">&lt;mat-option value="option-1">Option 1&lt;/mat-option&gt;</p>
      <p style="text-indent: 32px">
        &lt;mat-option value="option-2">Option 2 Option 2 Option 2 Option 2&lt;/mat-option&gt;
      </p>
      <p style="text-indent: 32px">&lt;mat-option value="option-3">Option 3&lt;/mat-option&gt;</p>
      <p style="text-indent: 32px">&lt;mat-option value="option-4">Option 4&lt;/mat-option&gt;</p>
      <p style="text-indent: 16px">&lt;/mat-select&gt;</p>
      <p>&lt;/mat-form-field&gt;</p>
    </code>
    <h5>Bci Select (New)</h5>
    <!-- <img class="code-example" src="../../../assets/img/BciSelectExample.png" /> -->
    <code>
      <p>&lt;bci-select placeholder="Select" label="Pick an option" [(ngModel)]="currentOption"&gt;</p>
      <p style="text-indent: 16px">&lt;mat-option value="option-1"&gt;Option 1&lt;/mat-option></p>
      <p style="text-indent: 16px">
        &lt;mat-option value="option-2"&gt;Option 2 Option 2 Option 2 Option 2&lt;/mat-option&gt;
      </p>
      <p style="text-indent: 16px">&lt;mat-option value="option-3"&gt;Option 3&lt;/mat-option&gt;</p>
      <p style="text-indent: 16px">&lt;mat-option value="option-4"&gt;Option 4&lt;/mat-option&gt;</p>
      <p>&lt;/bci-select></p>
    </code>
  </div>
</bci-page-content>
