import {Component, Input, ViewChild} from '@angular/core';
import {ShowOptions} from './claimHelper.class';
import {MatSelect} from "@angular/material/select";

 
@Component({
    selector: 'claim-enities-selection',

    template:`
       <span *ngIf="showOptions && showOptions.linkToEntities && showOptions.linkToEntities.length > 0"
            class=" entitiesSelection portal-box uk-text-small clickable" style=""
            (click)="open()">
      <mat-select  [(value)]="showOptions.show"
                   [disableOptionCentering]="true" >
  
        <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1" value="result">Research outcomes</mat-option>
        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('project')!=-1" value="project">Projects</mat-option>
        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('context')!=-1" value="context">Research communities</mat-option>
        
      </mat-select>
  
      
     </span>
    `,

})
export class ClaimEntitiesSelectionComponent{
  @ViewChild(MatSelect) matSelect: MatSelect;
  @Input() showOptions:ShowOptions = new ShowOptions();
   
  open() {
    if (this.matSelect && !this.matSelect.focused) {
      this.matSelect.open();
    }
  }
 
}