import {Component, Input,Output, EventEmitter, ViewChild} from '@angular/core';
import {AlertModal} from '../../../utils/modal/alert';
import {ClaimResult} from '../../claim-utils/claimEntities.class';
import {IMyOptions, IMyDateModel} from '../../../utils/my-date-picker/interfaces/index';
import {Dates} from '../../../utils/string-utils.class';

@Component({
    selector: 'claim-selected-results',
    template: `



         <div class="uk-placeholder uk-margin-top" >
           <div  *ngIf="results.length == 0 " class="uk-alert no-selected-message uk-text-center">You have not selected any research results</div>
           <div *ngIf="results.length > 0 ">
            <h5 class=" uk-margin uk-h5 uk-text-primary" > {{title}} ({{results.length | number}}) </h5>
            <table class="uk-table uk-table-responsive">
              <thead *ngIf="showAccessRights">
                <tr>
                  <th> Research Result</th>
                  <th> Change type and access mode</th>
                </tr>
              </thead>
              <tbody>
                 <tr  *ngFor="let pub of results" >
                     <td   >
                        <div>
                          <span *ngIf="showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button"><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span>
                          <a *ngIf="pub.url" target="_blank" href="{{pub.url}}" > <span class="custom-external"></span> {{pub.title?pub.title:'[No title available]'}}</a>
                          <span *ngIf="!pub.url" >{{pub.title?pub.title:'[No title available]'}}</span>
                          <span *ngIf="!showAccessRights" (click)="removePublication(pub)" aria-hidden="true" class="uk-icon-button icon-button-small ">
                            <span class="uk-icon">
                              <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
                            </span>
                          </span>
                        </div>

                        <span *ngIf="pub.publisher"  >Publisher: {{pub.publisher}}</span>
                        <span  *ngIf="pub.journal " >Journal: {{pub.journal}}</span>
                        <span *ngIf="pub.date"   >({{pub.date}})</span>

                        <div *ngIf="pub.authors && pub.authors.length > 0"  >Authors: <span *ngFor="let author of pub.authors.slice(0,10)  let i = index">{{author}}{{(i < (pub.authors.slice(0,10).length-1))?"; ":""}}{{(i == pub.authors.slice(0,10).length-1 && pub.authors.length > 10)?"...":""}}</span></div>

                        <div *ngIf="pub.editors && pub.editors.length > 0"  >Editors: <span *ngFor="let author of pub.editors.slice(0,10)  let i = index">{{author}} {{(i < (pub.editors.slice(0,10).length-1))?"; ":""}}{{(i == pub.editors.slice(0,10).length-1 && pub.editors.length > 10)?"...":""}}</span></div>


                       <div><span class="uk-label label-grey">{{pub.source}}</span>
                        <span *ngIf="pub.accessRights" [class]=" 'uk-label label-'+pub.accessRights" > {{pub.accessRights}}</span>
                         <span *ngIf="pub.type" [class]="'uk-label label-'+pub.type" > {{pub.type}}</span>
                        </div>
                    </td>
                    <td *ngIf="showAccessRights  && pub.source != 'openaire' "   >

                            <select   [(ngModel)]="pub.type" name="{{'select_type_'+pub.id}}"  >
                              <option   [value]="'publication'" (click)="onTypeChanged('publication',pub)" >Publication</option>
                              <option   [value]="'dataset'"   (click)="onTypeChanged('dataset',pub)" >Research Data</option>
                              <option   [value]="'software'"   (click)="onTypeChanged('software',pub)" >Software</option>
                            </select>

                            <select   [(ngModel)]="pub.accessRights" name="{{'select_rights_'+pub.id}}"  >
                              <option *ngFor="let type of accessTypes"  [value]="type"  (click)="accessRightsTypeChanged(type,pub)">{{type}}</option>
                            </select>
                            <my-date-picker *ngIf="pub.accessRights== 'EMBARGO'"  name="{{'date'+pub.id}}" [options]="myDatePickerOptions"
                            [(ngModel)]="nextDate" (dateChanged)="onDateChanged($event,pub)" ></my-date-picker>

                    </td>



                     <td *ngIf="showAccessRights  && pub.source == 'openaire' "  >
                           Currently you cannot change metadata from OpenAIRE

                    </td>
                 </tr>
                </tbody>

            </table>
          <div>
            <modal-alert (alertOutput)="confirmClose($event)">
            </modal-alert>
          </div>
  </div>
</div>


          `

})
export class ClaimSelectedResultsComponent {
  ngOnInit() {
    var myDate = new Date();
    this.nextDate = { date: { year: myDate.getFullYear()+10, month: (myDate.getMonth()+1), day: myDate.getDate() } };
    //2015-05-01

}

 @Input() results: ClaimResult[];
 @Input() title:string = "Research Results";
 @Input() showAccessRights:boolean = false;
 @Input() bulkMode:boolean = false;
 // @Output()resultsChange = new EventEmitter();
 @Input() showSearch:boolean = false;
 nextDate  = {};
 @ViewChild(AlertModal) alertApplyAll;
 @Input()  localStoragePrefix:string = "";

public commonAccessRights = "OPEN"; // for access rights- changes when user apply a change to every result
public commonEmbargoEndDate; // for access rights: embargoEndDate - changes when user apply a change to every result
public commonType; // for research result type - changes when user apply a change to every result
public typeChanged:boolean = true; //
accessTypes = ["OPEN","CLOSED","EMBARGO","RESTRICTED"];
private myDatePickerOptions: IMyOptions = {
      // other options...
      dateFormat: 'yyyy-mm-dd',
      selectionTxtFontSize: '15px',
      height:'28px',
      width: '100%',
      editableDateField: false,
      showClearDateBtn: false
  };


 removePublication(item:any){
   var index:number =this.results.indexOf(item);
    if (index > -1) {
       this.results.splice(index, 1);
       if(this.results != null){
         localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
       }
   }
  //  this.resultsChange.emit({
  //    value: this.results
  //  });
 }


   onDateChanged (event:any, item:any) {
       item.embargoEndDate = Dates.getDateFromString(event.formatted);
       if(this.results.length > 1 ){
         this.commonAccessRights = "EMBARGO";
         this.commonEmbargoEndDate = item.embargoEndDate;
           this.confirmOpen(false,"Do you wish to apply the change to every result?");
       }

   }
   onTypeChanged (event:any, item:any) {
       item.type =(event);
       if(this.results.length > 1 ){
         this.commonType = item.type;
            this.confirmOpen(true, "Do you wish to apply the change to every result?");
       }

   }
  //  resultsChanged($event) {
  //    this.results=$event.value;
  //    this.resultsChange.emit({
  //      value: this.results
  //    });
  //  }
   /* The following methods:
      *typeChanged
      *confirmOpen
      *confirmClose
    implement the functionality: change accessRights of a publication - apply to all if asked */
   accessRightsTypeChanged (type:any, item:any) {
       item.accessRights = type;
       if(this.results.length > 1 ){
         this.commonAccessRights = type;
         if(this.commonAccessRights != "EMBARGO"){
           this.commonEmbargoEndDate = item.embargoEndDate;
           this.confirmOpen(false, "Do you wish to apply the change to every result?");
         }
       }

   }
   confirmOpen(type: boolean, message: string){
     this.typeChanged = type;
     this.alertApplyAll.cancelButton = true;
     this.alertApplyAll.okButton = true;
     this.alertApplyAll.alertTitle = "Change metadata";
     this.alertApplyAll.message = "Do you wish to apply the change to every result?";
     this.alertApplyAll.okButtonText = "Yes";
     this.alertApplyAll.cancelButtonText = "No";
     this.alertApplyAll.open();
   }
    confirmClose(data){
      if(this.typeChanged){

        for (var i = 0; i < this.results.length; i++) {
          if(this.results[i].source != 'openaire' ){
            this.results[i].type = this.commonType;
          }
        }

      }else{
        for (var i = 0; i < this.results.length; i++) {
          if(this.results[i].source != 'openaire' ){
            this.results[i].accessRights = this.commonAccessRights;
            if(this.commonAccessRights == "EMBARGO"){
              this.results[i].embargoEndDate = this.commonEmbargoEndDate;
            }
          }
        }
     }
   }
}