<!--
  ~ 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</h2>

  <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 examples</h3>
    <mat-form-field>
      <mat-label>Pick an option</mat-label>
      <mat-select placeholder="Select" [(ngModel)]="currentOption">
        <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>
      </mat-select>
    </mat-form-field>
    <h4>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 />
    <mat-form-field [ngStyle]="{ 'width': inputWidth}">
      <mat-label>Pick an option</mat-label>
      <mat-select placeholder="Select" [(ngModel)]="currentOptionCustomWidth">
        <mat-option value="option-1" matTooltip="Test">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>
      </mat-select>
    </mat-form-field>
    <h4>With notification</h4>
    <mat-label *ngIf="notificationTypesRequired">(*) Mandatory field</mat-label>
    <p>
      <mat-form-field>
        <mat-label>Notification Type</mat-label>
        <mat-select placeholder="Select" [formControl]="selectFormControl" [disabled]="notificationTypesDisabled">
          <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-select>
        <mat-hint *ngIf="selectFormControl.value === 'info'">Hint/Info</mat-hint>
        <mat-hint success *ngIf="selectFormControl.value === 'success'">Success </mat-hint>
        <mat-error warning *ngIf="selectFormControl.status === 'INVALID' && isWarning">Warning</mat-error>
        <mat-error *ngIf="selectFormControl.status === 'INVALID'  && isError">Error</mat-error>
      </mat-form-field>
    </p>
    <code>
      Value: {{ selectFormControl.value }}, Touched: {{ selectFormControl.touched }}, Dirty: {{ selectFormControl.dirty
      }}, Status: {{ selectFormControl.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 bciIntegratedButton (click)="selectFormControl.setValue('warning')">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item hide="mobile">
          <button bciIntegratedButton (click)="selectFormControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>

    <hr />
    <h3 id="multiple-section">Multiple selection</h3>
    <mat-label *ngIf="pokemonRequired">(*) Mandatory field</mat-label>
    <p>
      <mat-form-field [color]="pokemonTheme">
        <mat-label>Pokemon</mat-label>
        <mat-select
          multiple
          placeholder="Select"
          [(ngModel)]="currentPokemon"
          [required]="pokemonRequired"
          [disabled]="pokemonDisabled"
          #pokemonControl="ngModel"
        >
          <mat-option *ngFor="let creature of pokemon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
        </mat-select>
        <mat-error *ngIf="pokemonControl.hasError('required')">You have to select an option</mat-error>
      </mat-form-field>
    </p>
    <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 bciIntegratedButton (click)="setPokemonValue()">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciIntegratedButton (click)="pokemonControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>
    <h4>With disabled options</h4>
    <mat-form-field [color]="pokemonTheme">
      <mat-label>Pokemon</mat-label>
      <mat-select multiple placeholder="Select" [(value)]="currentPokemonDisabled">
        <mat-option value="Disabled" disabled> Disabled </mat-option>
        <mat-option value="Disabled" disabled> Disabled </mat-option>
        <mat-option *ngFor="let creature of pokemon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
      </mat-select>
    </mat-form-field>

    <hr />
    <h3 id="option-group-section">Option groups</h3>
    <mat-form-field>
      <mat-label>Pokemon</mat-label>
      <mat-select placeholder="Select" [(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>
      </mat-select>
    </mat-form-field>

    <h4>Multiple Selection</h4>
    <mat-form-field>
      <mat-label>Pokemon</mat-label>
      <mat-select placeholder="Select" [(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>
      </mat-select>
    </mat-form-field>

    <h4>Multiple Selection and disabled options</h4>
    <mat-form-field>
      <mat-label>Pokemon</mat-label>
      <mat-select placeholder="Select" [(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>
      </mat-select>
    </mat-form-field>

    <hr />
    <h3 id="other-section">Other exmaples</h3>
    <h4>Without Angular forms</h4>
    <mat-form-field>
      <mat-label>Digimon</mat-label>
      <mat-select placeholder="Select" [(value)]="currentDigimon" [required]="digimonRequired">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let creature of digimon" [value]="creature.value"> {{ creature.viewValue }} </mat-option>
      </mat-select>
    </mat-form-field>
    <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 bciIntegratedButton (click)="currentDigimon='pajiramon-3'">Set Value</button>
          </bci-commandbar-item>
        </bci-commandbar-quickfilters>
      </bci-commandbar>
    </p>
    <h4>Using FormControl</h4>
    <mat-form-field>
      <mat-label>Food I like</mat-label>
      <mat-select placeholder="Select" [formControl]="foodControl">
        <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</mat-option>
      </mat-select>
    </mat-form-field>
    <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 bciIntegratedButton (click)="foodControl.setValue('pizza-1')">Set Value</button>
        </bci-commandbar-item>
        <bci-commandbar-item>
          <button bciIntegratedButton (click)="foodControl.reset()">Reset</button>
        </bci-commandbar-item>
      </bci-commandbar-quickfilters>
    </bci-commandbar>
    <h4>Change event</h4>
    <mat-form-field>
      <mat-label>Starter Pokemon</mat-label>
      <mat-select placeholder="Select" (selectionChange)="latestChangeEvent = $event">
        <mat-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }} </mat-option>
      </mat-select>
    </mat-form-field>
    <p><code> Change event value: {{ latestChangeEvent?.value }} </code></p>
  </div>
</bci-page-content>
