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

<bci-page-content>
  <h2 class="page-heading">Context Menu</h2>

  <h3>Basic examples</h3>
  <p>
    Note: bciMenuMaxHeight directive to used within the 'Labeled divider' example below to demonstrate the auto scroll
    feature of the overlay based on the available space.
  </p>
  <div class="demo-menu">
    <div class="menu-section">
      <p>You clicked on: {{ selected }}</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open basic menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
          <span> {{item.text}} </span>
        </button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>Labeled divider {{ selected }}</p>
      <div class="menu-container">
        <button
          bciIntegratedButton
          mat-icon-button
          [matMenuTriggerFor]="labeled"
          #t="matMenuTrigger"
          [bciMenuMaxHeight]="t.menuOpen"
          aria-label="Open basic menu"
        >
          <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
        </button>
        <mat-menu #labeled="matMenu">
          <div mat-menu-item class="labeled-divider"><span>Menu Options</span></div>
          <button mat-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
            <span>{{item.text}}</span>
          </button>
          <div mat-menu-item class="labeled-divider"><span>Smartphone Settings</span></div>
          <button mat-menu-item *ngFor="let item of iconItems" (click)="select(item.text)" [disabled]="item.disabled">
            <mat-icon [fontIcon]="item.icon"></mat-icon>
            <span>{{item.text}}</span>
          </button>
        </mat-menu>
      </div>
    </div>

    <div class="menu-section">
      <p>With icon to left</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="menuWithIconLeft" aria-label="Open basic menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #menuWithIconLeft="matMenu">
        <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
          <mat-icon fontIcon="bosch-ic-emoji-happy"></mat-icon>
          <span> {{item.text}} </span>
        </button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>With icon to right</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="menuWithIconRight" aria-label="Open basic menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #menuWithIconRight="matMenu">
        <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
          <span><span> {{item.text}} </span> <mat-icon fontIcon="bosch-ic-emoji-happy"></mat-icon></span>
        </button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>With both icons</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="menuWithIcons" aria-label="Open basic menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #menuWithIcons="matMenu">
        <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
          <mat-icon fontIcon="bosch-ic-emoji-happy"></mat-icon>
          <span> {{item.text}} <mat-icon fontIcon="bosch-ic-emoji-happy"></mat-icon></span>
        </button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>Nested menu</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="animals">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #animals="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
        <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
      </mat-menu>
      <mat-menu #vertebrates="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="fish">
          <mat-icon [fontIcon]="'bosch-ic-smartphone'"></mat-icon><span>Fishes</span>
        </button>
        <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
        <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
        <mat-divider></mat-divider>
        <button mat-menu-item>Birds</button>
        <button mat-menu-item>Mammals</button>
      </mat-menu>
      <mat-menu #invertebrates="matMenu">
        <button mat-menu-item>Insects</button>
        <button mat-menu-item>Molluscs</button>
        <button mat-menu-item>Crustaceans</button>
        <button mat-menu-item>Corals</button>
        <button mat-menu-item>Arachnids</button>
        <button mat-menu-item>Velvet worms</button>
        <button mat-menu-item>Horseshoe crabs</button>
      </mat-menu>
      <mat-menu #fish="matMenu">
        <button mat-menu-item>Baikal oilfish</button>
        <button mat-menu-item>Bala shark</button>
        <button mat-menu-item>Ballan wrasse</button>
        <button mat-menu-item>Bamboo shark</button>
        <button mat-menu-item>Banded killifish</button>
      </mat-menu>
      <mat-menu #amphibians="matMenu">
        <button mat-menu-item>Sonoran desert toad</button>
        <button mat-menu-item>Western toad</button>
        <button mat-menu-item>Arroyo toad</button>
        <button mat-menu-item>Yosemite toad</button>
      </mat-menu>
      <mat-menu #reptiles="matMenu">
        <button mat-menu-item>Banded Day Gecko</button>
        <button mat-menu-item>Banded Gila Monster</button>
        <button mat-menu-item>Black Tree Monitor</button>
        <button mat-menu-item>Blue Spiny Lizard</button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>Click to navigate</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="anchorMenu" aria-label="Open anchor menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu #anchorMenu="matMenu">
        <a mat-menu-item *ngFor="let item of items" routerLink="../" [disabled]="item.disabled">
          <span> {{item.text}} </span>
        </a>
      </mat-menu>
    </div>
  </div>

  <hr />
  <h3>Menu with position</h3>
  <div class="demo-menu">
    <div class="menu-section">
      <p>Position x: before</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu xPosition="before" #posXMenu="matMenu" class="before">
        <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
          <mat-icon fontIcon="bosch-ic-emoji-happy"></mat-icon>
          <span> {{item.text}} </span>
        </button>
      </mat-menu>
    </div>

    <div class="menu-section">
      <p>Position y: above</p>
      <button bciIntegratedButton mat-icon-button [matMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu yPosition="above" #posYMenu="matMenu">
        <button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
          <span> {{item.text}} </span>
        </button>
      </mat-menu>
    </div>
  </div>

  <hr />
  <h3>Menu with overlap trigger</h3>
  <div class="demo-menu">
    <div class="menu-section">
      <br />
      <mat-slide-toggle color="primary" [(ngModel)]="otToggle"> Switch overlap trigger </mat-slide-toggle>
      <p>overlapTrigger: {{otToggle}}</p>
      <button bciIntegratedButton mat-icon-button [mat-menu-trigger-for]="menuOverlay">
        <mat-icon fontIcon="Bosch-Ic-show-more-vertical"></mat-icon>
      </button>
      <mat-menu [overlapTrigger]="otToggle" #menuOverlay="matMenu">
        <button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
          <span> {{item.text}} </span>
        </button>
      </mat-menu>
    </div>
  </div>
</bci-page-content>
