import {Component, Input} from '@angular/core';
import {JSONP_PROVIDERS}  from '@angular/http';
import {Observable}       from 'rxjs/Observable';
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
import {ClaimContextComponent} from './claimContext/claimContext.component';
import {ClaimPublicationComponent} from './claimPublication/claimPublication.component';
import {ClaimDatasetComponent} from './claimDataset/claimDataset.component';
import {ClaimSelectedComponent} from './selected/selected.component';
import {ClaimInsertComponent} from './insertClaim/insertClaim.component';
import {ClaimProjectsComponent} from './claimProject/claimProject.component';
import {LinkingHomeComponent} from './linkingHome.component';
// import { MD_RADIO_DIRECTIVES, MdRadioDispatcher } from '@angular2-material/radio';
// import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';



@Component({
    selector: 'linking',
    //providers: [MdRadioDispatcher],
    directives: [ROUTER_DIRECTIVES, ClaimContextComponent, ClaimPublicationComponent, ClaimSelectedComponent, ClaimInsertComponent,ClaimDatasetComponent, ClaimProjectsComponent, LinkingHomeComponent],
    template: `
    <div class="container">
      <div class="page-header">
        <h1>Link research resutls</h1>
      </div>
      <linking-home *ngIf="  show == 'home' "  (chosenTypeChange)="chosenTypeChange($event)"  ></linking-home>
      <div  *ngIf="  show != 'home' " >
      <div  *ngIf="  show != 'claim'" class="row" >
        <div class="col-sm-6">
        <div  *ngIf=" show=='result' " >
          <form>

            <!--<md-input class="demo-full-width default" placeholder="Search for Research Results"  [(ngModel)]="keyword"></md-input>

            <md-radio-group class="default" [(value)]="searchType">
              <md-radio-button   [value]="publication" [checked]="searchType === 'publication'" >Publication</md-radio-button>
              <md-radio-button   [value]="dataset" [checked]="searchType != 'publication'">Dataset</md-radio-button>
            </md-radio-group> -->
            <div class="input-group">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{(searchType === 'publication')?"Publication":"Dataset"}} </button>
                <ul class="dropdown-menu">
                  <li (click)="typeChanged('publication')"  ><a  >Publication</a></li>
                  <li (click)="typeChanged('dataset')"  ><a  >Dataset</a></li>
                </ul>
              </div>
            <!-- <div class="resultType">
              <span class="input-group-addon">
                <input #publication name="searchType" type="radio"  [checked]="searchType === 'publication'" value="publication" (click)="searchType = publication.value" />Publication
                <input #dataset name="searchType"  [checked]="searchType === 'dataset'" type="radio"  value="dataset" (click)="searchType = dataset.value" />Dataset
              </div>
              </span>-->
              <input class=" form-control" [(ngModel)]="keyword"/>

              <span class="input-group-btn">
                <button (click)="search()"  type="submit" class="btn btn-default">Search</button>
              </span>
            </div>
           </form>
        </div>
        <div *ngIf=" show=='publication' ">
              <claim-publication [keyword]="keyword" [selectedPublications]="publications" (publicationsChange)="publicationsChange($event)"  > </claim-publication>
        </div>
        <div  *ngIf=" show=='dataset' " >
                <claim-dataset  [keyword]="keyword"  [selectedDatasets]="datasets" (datasetsChange)="datasetsChange($event)"  > </claim-dataset>
        </div>
        <div  *ngIf=" show=='project' " >
               <claim-projects     [selectedProjects]="projects"  (projectsChange)="projectsChange($event)" > </claim-projects>
        </div>
        <div  *ngIf=" show=='software' " >
               <p>TODO software</p>
        </div>
          <div  *ngIf="  show == 'context'" >
             <claim-contexts   [selectedList]="contexts" (contextsChange)="contextsChange($event)"  > </claim-contexts>
          </div>
        <!--  <div  *ngIf="  show == 'claim'" >
             <claim-insert   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"  ></claim-insert>
          </div>-->
        </div>
        <div class="col-sm-6">
          <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"   > </claim-selected>
      </div>
      </div>
      <div  *ngIf="  show == 'claim'"  >
        <claim-selected   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects" [showAccessRights]="'true'" > </claim-selected>
        <claim-insert   [contexts]="contexts" [publications]="publications" [datasets]="datasets" [projects]="projects"></claim-insert>
      </div>

    <button class="btn btn-primary" *ngIf="show != 'home'"  (click)="prev()">Prev</button>
    <button  class="btn btn-primary"  *ngIf="show != 'claim'" (click)="next()">Next</button>
  </div>
</div>


`

})
//[(ngModel)]="date"
export class LinkingComponent {
  constructor ( private _router: Router  ) {
   }
  sourceType:string;
  targetType:string;
  step:number = 1;
  contexts=[];
  projects=[];
  publications=[];
  datasets=[];
  show = "home";
  searchType="publication";
  date='8-6-2016';
  keyword: string = "";
  chosenType:string ="project";
   ngOnInit() {

  }
  next(){

    if((this.show == 'project' || this.show == 'context' || this.show == 'software')){
        this.show='result';
    }else if((this.show == 'result' && this.keyword == '')||(this.show == 'dataset' || this.show == 'publication')){
        this.show='claim';
    }else if(this.show == 'result' ){
      if(this.searchType == 'publication' ){
          this.show="publication";
      }else{
          this.show="dataset";
      }
    }
  }
  prev(){
    if(this.show == 'result'){
      if(this.chosenType == 'project'){
         this.show='project';
      }else if(this.chosenType == 'context'){
         this.show='context';
      }else if(this.chosenType == 'software'){
         this.show='software';
      }else{
        this.show='home';

      }
   }else if(this.show == 'context' || this.show == 'project' || this.show == 'software' ){
        this.show='home';
    }else if(this.show == 'dataset' || this.show == 'publication'){
        this.show='result';
    } else if(this.show == 'claim'){
        this.show='result';
    }
  }
  goto(term: string) {
     this._router.navigate( ['Search', { keyword: term }] );
  }

  search() {
      if(this.searchType == 'publication' ){
          this.show="publication";
      }else{
          this.show="dataset";
      }

  }

   sourceTypeChange($event) {
     this.sourceType=$event.value;
    console.log($event.value);
  }
  targetTypeChange($event) {
    this.targetType=$event.value;
   console.log($event.value);
 }
 contextsChange($event) {
   this.contexts=$event.value;
   console.log($event.value);
  }
  publicationsChange($event) {
    this.publications=$event.value;
  }
  datasetsChange($event) {
    this.datasets=$event.value;
  }
  projectsChange($event) {
    this.projects=$event.value;
  }
  typeChanged(type:string) {
    this.searchType = type;
  }
  chosenTypeChange($event) {
    this.chosenType = this.show;
    this.show=$event.value;

  }
}