import {Component, Input} from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
import {Title, Meta} from '@angular/platform-browser';

import {Observable} from 'rxjs';
import {ErrorCodes} from '../utils/properties/errorCodes';

import {EnvProperties} from '../utils/properties/env-properties';

import {RouterHelper} from '../utils/routerHelper.class';
import {FetchDataproviders} from '../utils/fetchEntitiesClasses/fetchDataproviders.class';
import {SearchDataprovidersService} from '../services/searchDataproviders.service';
import {OrganizationService} from '../services/organization.service';
import {PiwikService} from '../utils/piwik/piwik.service';
import {SEOService} from '../sharedComponents/SEO/SEO.service';

import {ZenodoInformationClass} from './utils/zenodoInformation.class';
import {properties} from "../../../environments/environment";

@Component({
  selector: 'deposit-result',
  template: `
    <div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle">
      <div uk-grid uk-grid>
        <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
          <schema2jsonld *ngIf="url" [URL]="url" name="Share {{requestFor}}" type="other"></schema2jsonld>

          <div class="uk-container ">
            <div class="uk-article-title custom-article-title uk-margin-bottom">
              Share {{requestFor}}
            </div>
            <helper position="top"></helper>
            <div class="uk-grid  helper-grid">
              <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
              <div class="uk-width-expand">
                <!--div *ngIf="status != errorCodes.LOADING" class="uk-margin-bottom  uk-margin-top">
                  <h3>See if your institution has a repository </h3>

                  <form class= "uk-grid">
                      <div class="uk-width-1-2 ">
                      <entities-autocomplete [(properties)]=properties fieldId="organization" (click)="warningMessage = ''" [entityType]="'organization'"
                        [depositType]=compatibility  [showSelected]=true [placeHolderMessage] = "'Organization name'"
                        [title] = "'Organizations'"  [multipleSelections]=false (selectedValueChanged)="valueChanged($event)">
                      </entities-autocomplete>
                      </div>
                      <button class=" uk-button portal-button"  type="submit" (click)="organizationSelected(selectedId)" >
                          Locate
                      </button>
                      <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-animation-fade" role="alert">{{warningMessage}}</div>
                  </form>
                </div-->

                <h4 *ngIf=" organization && (fetchDataproviders.searchUtils.status == errorCodes.DONE ||
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0))"
                    class="organization">
                  <a *ngIf="organization['url']!=''" href="{{organization.url}}" target="_blank">
                    <span><i class="custom-external"></i>{{organization['name']}}</span>
                  </a>
                  <span *ngIf="organization['url']==''">{{organization['name']}}</span>
                </h4>

                <div *ngIf="subjectResults" class="uk-width-1-1  uk-margin uk-padding uk-panel  uk-background-muted">
                  <form class="uk-margin uk-text-center uk-margin-top">
                    <input type="text" [(ngModel)]="subject" class=" uk-input uk-width-1-2" name="subject"
                           placeholder="Search for classifications..."/>

                    <button class=" uk-button portal-button" type="submit" (click)="newSubject()">
                      Search
                    </button>
                  </form>
                  <div *ngIf="subject.length > 0" class=" uk-text-center ">
                      <span>Keywords: {{subject}}<span>
                        <a class=" " (click)="subject=''; newSubject()">  <span aria-hidden="true"
                                                                                class="uk-icon-button icon-button-small ">
                            <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>
                         </a>

                        </span>
                    </span>
                  </div>
                </div>

                <p class="uk-text-meta"
                   *ngIf=" fetchDataproviders.searchUtils.status == errorCodes.DONE ||
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)">
                  Please use the information below and contact your repository to deposit your <span
                    class="uk-text-lowercase">{{requestFor}}</span>.
                </p>

                <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE ||
                            (fetchDataproviders.searchUtils.status == errorCodes.LOADING && !fetchDataproviders.loadPaging && fetchDataproviders.oldTotalResults > 0)"
                     class="uk-align-center uk-margin-remove-bottom">
                  <search-paging [type]="'content providers'" [(searchUtils)]="fetchDataproviders.searchUtils"
                                 [(results)]="fetchDataproviders.results"
                                 [(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
                                 [loadPaging]="fetchDataproviders.loadPaging"
                                 [oldTotalResults]="fetchDataproviders.oldTotalResults">
                  </search-paging>
                </div>

                <div *ngIf="status == errorCodes.LOADING || fetchDataproviders.searchUtils.status == errorCodes.LOADING"
                     class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
                    class="loading-gif  uk-align-center"></span>
                </div>

                <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE"
                     class="  uk-margin uk-margin-remove-top other-results">
                  <div *ngFor="let result of fetchDataproviders.results"
                       [title]="result.compatibilityUNKNOWN ? 'Incompatible content provider' : ''"
                       [class]="'uk-margin-small-top uk-card uk-padding-small uk-animation-fade '+(result.compatibilityUNKNOWN ? 'li-disabled ' : 'uk-card-default' ) ">
                    <h5>
                      <span *ngIf="!result.compatibilityUNKNOWN" class="" title="Compatible Content Provider">
                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check"
                             ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1"
                                                 points="4,10 8,15 17,4"></polyline></svg>
                      </span>
                      <a *ngIf="!result.compatibilityUNKNOWN" [queryParams]="{datasourceId: result.id}"
                         routerLinkActive="router-link-active"
                         [routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
                        <span *ngIf="result['title'].name" [innerHTML]="result['title'].name"></span>
                        <span *ngIf="!result['title'].name">[no title available]</span>
                      </a>
                      <p *ngIf="result.compatibilityUNKNOWN && result['title'].name"
                         [innerHTML]="result['title'].name"></p>
                      <p *ngIf="result.compatibilityUNKNOWN && !result['title'].name">[no title available]</p>
                    </h5>

                    <approved-by-community [contentProviderId]="result.id"></approved-by-community>
                    <span *ngIf="result['type'] != undefined && result['type'] != ''"
                          class="uk-label custom-label label-blue label-dataprovider"
                          title="Type"> {{result['type']}}</span>
                    <span *ngIf="result['compatibility'] != undefined && result['compatibility'] != ''"
                          class="uk-label custom-label  label-compatibility"
                          title="Compatibility">{{result.compatibility}}</span>

                    <div
                        *ngIf="subjectResults && result['organizations'] != undefined && result['organizations'].length > 0">
                      <span> Organization: </span>
                      <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
                            <!--a *ngIf="organization.url != undefined" href="{{organization.url}}"-->
                            <a *ngIf="organization.id" [queryParams]="{organizationId: organization.id}"
                               routerLinkActive="router-link-active"
                               [routerLink]="properties.searchLinkToOrganization.split('?')[0]">
                                    {{organization.name}}</a><span

                          *ngIf="!organization.id">
                                    {{organization.name}}</span><span

                          *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
                        </span>
                      <span *ngIf="result['organizations'].length > 10">...</span>
                    </div>
                    <div *ngIf="result['countries'] && result['countries'].length > 0">
                      Country: <span
                        *ngFor="let country of  result['countries'].slice(0,10) let i = index">{{country}}{{(i < (result['countries'].slice(0, 10).length - 1)) ? ", " : ""}}{{(i == result['countries'].slice(0, 10).length - 1 && result['countries'].length > 10) ? "..." : ""}}</span>
                    </div>
                    <div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
                      <span>Website URL: </span>
                      <span>
                          <a href="{{result['websiteURL']}}" target="_blank" class="custom-external custom-icon">
                            {{result['websiteURL']}}
                          </a>
                        </span>
                    </div>
                    <div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
                      <span>OAI-PMH URL: </span>
                      <span>
                          <a href="{{result['OAIPMHURL']}}" target="_blank" class="custom-external custom-icon">
                            {{result['OAIPMHURL']}}
                          </a>
                        </span>
                    </div>

                    <div *ngIf="subjectResults && result['subjects'] && result['subjects'].length > 0">
                      Subject: <span
                        *ngFor="let subject of  result['subjects'].slice(0,10) let i = index">{{subject}}{{(i < (result['subjects'].slice(0, 10).length - 1)) ? ", " : ""}}{{(i == result['subjects'].slice(0, 10).length - 1 && result['subjects'].length > 10) ? "..." : ""}}</span>
                    </div>
                  </div>
                </div>

                <div *ngIf="!subjectResults">
                  <div *ngIf="status == errorCodes.NOT_FOUND || status == errorCodes.ERROR ||
                              status == errorCodes.NOT_AVAILABLE || status == errorCodes.NONE"
                       class="alert alert-warning">
                    <div *ngIf="status == errorCodes.NOT_FOUND && organizationId != ''">
                      No organization with ID: {{organizationId}} found.
                    </div>
                    <div *ngIf="status == errorCodes.ERROR && organizationId != ''">
                      An error occured.
                    </div>
                    <span *ngIf="status == errorCodes.NOT_AVAILABLE && organizationId != ''">
                          Service temprorarily unavailable. Please try again later.
                      </span>
                    <div *ngIf="status == errorCodes.NONE">
                      No ID for organization.
                    </div>
                  </div>
                </div>
                <div *ngIf="status == errorCodes.DONE && fetchDataproviders.searchUtils.status != errorCodes.DONE
                      && fetchDataproviders.searchUtils.status != errorCodes.LOADING" class="alert alert-warning">
                    <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">
                        An error occured.
                    </span>
                  <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.NOT_AVAILABLE">
                        Service temprorarily unavailable. Please try again later.
                    </span>
                  <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.OUT_OF_BOUND">
                        Requested page out of bounds.
                    </span>
                  <div *ngIf="!subjectResults">
                    No content providers found for institution:
                    <a *ngIf="organization['url']!=''" target="_blank" href="{{organization.url}}">
                      <span>{{organization['name']}} (<i class="custom-external"></i>)</span>
                    </a>
                    <span *ngIf="organization['url']==''">{{organization['name']}}</span>
                    .
                  </div>
                  <div *ngIf="subjectResults">
                    No content providers found<span *ngIf="subject != ''"> with classification "{{subject}}"</span>.
                  </div>
                </div>
              </div>

              <div class="uk-width-1-5">
                <helper position="right" before="true"></helper>

                <div class="uk-card uk-card-default uk-card-body portal-card">
                  Deposit your {{requestFor}} in
                  <a href="{{zenodoInformation.url}}" target="_blank"
                     uk-tooltip="title: Zenodo is OpenAIRE's catch-all repository hosted by CERN.">
                    {{zenodoInformation.name}} (<i class="custom-external"></i>)</a>
                  <div class="uk-margin-top" *ngIf="zenodoInformation && zenodoInformation.shareInZenodoUrl">
                    <a href="{{zenodoInformation.shareInZenodoUrl}}">More Zenodo communities</a>
                  </div>
                </div>

                <!--div *ngIf="fetchDataproviders.results.length > 0" class="uk-card uk-card-default uk-card-body portal-card uk-margin-small-top">
                   Compatibility is mpla mpla
                </div-->

                <helper position="right" before="false"></helper>
              </div>
            </div>
            <button class=" uk-button uk-button-primary uk-margin-small-top" type="submit" (click)="goToDeposit()">
              <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                         icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000"
                                                                                 stroke-width="1.03"
                                                                                 points="13 16 7 10 13 4"></polyline></svg></span>
              Back
            </button>
            <helper position="bottom"></helper>
          </div>
        </div>
      </div>
    </div>
  
  `
})

export class DepositResultComponent {
  @Input() zenodoInformation: ZenodoInformationClass;
  @Input() compatibility: string = '';
  @Input() piwikSiteId = null;
  // Type of entity: Publication or Research Data
  @Input() requestFor: string = "Publications";
  
  public organization: { "name": string, "url": string };
  public organizationId: string = "";
  
  // Id of the new selected organization to be searched
  public selectedId: string = "";
  
  @Input() subjectResults: boolean = false;
  @Input() subject: string = "";
  
  public status: number;
  public warningMessage: string = "";
  
  public fetchDataproviders: FetchDataproviders;
  public linkToSearchDataproviders: string = "";
  
  public parameterNames: string[] = [];
  public parameterValues: string[] = [];
  
  public routerHelper: RouterHelper = new RouterHelper();
  public errorCodes: ErrorCodes = new ErrorCodes();
  sub: any;
  piwiksub: any;
  properties: EnvProperties = properties;
  url = null;
  
  constructor(private _router: Router,
              private  route: ActivatedRoute,
              private _searchDataprovidersService: SearchDataprovidersService,
              private _organizationService: OrganizationService,
              private _meta: Meta,
              private _title: Title,
              private _piwikService: PiwikService,
              private seoService: SEOService) {
    
    this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
    
    this.status = this.errorCodes.LOADING;
    
    
    var title = "Deposit " + this.requestFor;
    var description = "Openaire, repositories, open access, content provider, compatibility, organization, deposit " + this.requestFor;
    
    this.updateTitle(title);
    this.updateDescription(description);
    
  }
  
  ngOnInit() {
    this.seoService.createLinkForCanonicalURL(this.properties.baseLink + this._router.url, false);
    this.updateUrl(this.properties.baseLink + this._router.url);
    this.url = this.properties.baseLink + this._router.url;
    
    if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
      this.piwiksub = this._piwikService.trackView(this.properties, "Deposit " + this.requestFor, this.piwikSiteId).subscribe();
    }
    this.sub = this.route.queryParams.subscribe(params => {
      this.fetchDataproviders.searchUtils.page = (params['page'] === undefined) ? 1 : +params['page'];
      
      if (this.subjectResults) {
        this.status = this.errorCodes.DONE;
        
        this.subject = params['subject'];
        if (!this.subject) {
          this.subject = "";
        }
        this.parameterNames.push('subject');
        this.parameterValues.push(this.subject);
        
        this.searchDataprovidersBySubject();
      } else {
        if (this.organizationId) {
          this.searchDataproviders();
        } else {
          this.organizationId = params['organizationId'];
          this.parameterNames.push('organizationId');
          this.parameterValues.push(this.organizationId);
          
          if (this.organizationId) {
            this.getOrganizationInfo();
          }
        }
        this.selectedId = "";
      }
    });
  }
  
  ngDoCheck() {
    if (!this.subjectResults && (this.organizationId == "" || this.organizationId == undefined)) {
      this.organizationId = "";
      this.status = this.errorCodes.NONE;
      this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
    }
  }
  
  ngOnDestroy() {
    this.sub.unsubscribe();
    if (this.piwiksub) {
      this.piwiksub.unsubscribe();
    }
  }
  
  public newSubject() {
    this._router.navigate(['participate/deposit-subject-result'], {queryParams: {"subject": this.subject}});
  }
  
  public searchDataprovidersBySubject() {
    this.parameterNames = [];
    this.parameterValues = [];
    this.parameterNames.push('subject');
    this.parameterValues.push(this.subject);
    
    this.fetchDataproviders.getResultsBySubjectsForDeposit((this.subject == "") ? "*" : this.subject, this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
    this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
  }
  
  private searchDataproviders() {
    // if(this.organization != undefined) {
    //     this.fetchDataproviders.getResults(this.organization.name, false, 1, 10);
    // } else if(this.organizationId != undefined) {
    this.fetchDataproviders.getResultsForDeposit(this.organizationId, this.requestFor, this.fetchDataproviders.searchUtils.page, this.fetchDataproviders.searchUtils.size, this.properties);
    //}
    this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
  }
  
  private getOrganizationInfo() {
    this.fetchDataproviders.oldTotalResults = 0;
    this.fetchDataproviders.searchUtils.totalResults = 0;
    
    this._organizationService.getOrganizationNameAndUrlById(this.organizationId, this.properties).subscribe(
      data => {
        if (data == null) {
          this.status = this.errorCodes.NOT_FOUND;
          this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
        } else {
          this.organization = data;
          this.status = this.errorCodes.DONE;
          this.searchDataproviders();
        }
      },
      err => {
        //console.log(err)
        this.handleError("Error getting organization name and url for id: " + this.organizationId, err);
        
        this.fetchDataproviders.searchUtils.status = this.errorCodes.NONE;
        if (err.status == '404') {
          this.status = this.errorCodes.NOT_FOUND;
        } else if (err.status == '500') {
          this.status = this.errorCodes.ERROR;
        } else {
          this.status = this.errorCodes.NOT_AVAILABLE;
        }
      }
    );
  }
  
  public goToDeposit() {
    if (this.requestFor == "Publications") {
      this._router.navigate(['participate/deposit-publications']);
    } else if (this.requestFor == "Research Data") {
      this._router.navigate(['participate/deposit-datasets']);
    }
  }
  
  public valueChanged($event) {
    this.selectedId = $event.value;
  }
  
  public organizationSelected(id: string) {
    if (id && id.length > 0 && id != this.organizationId) {
      this.organization = null;
      this.status = this.errorCodes.LOADING;
      
      if (this.requestFor == "Publications") {
        this._router.navigate(['participate/deposit-publications-result'], {queryParams: {"organizationId": id}});
      } else if (this.requestFor == "Research Data") {
        this._router.navigate(['participate/deposit-datasets-result'], {queryParams: {"organizationId": id}});
      }
    } else {
      this.warningMessage = "No new organization selected";
    }
  }
  
  private updateDescription(description: string) {
    this._meta.updateTag({content: description}, "name='description'");
    this._meta.updateTag({content: description}, "property='og:description'");
  }
  
  private updateTitle(title: string) {
    var _prefix = "OpenAIRE | ";
    var _title = _prefix + ((title.length > 50) ? title.substring(0, 50) : title);
    this._title.setTitle(_title);
    this._meta.updateTag({content: _title}, "property='og:title'");
  }
  
  private updateUrl(url: string) {
    this._meta.updateTag({content: url}, "property='og:url'");
  }
  
  private handleError(message: string, error) {
    console.error("Deposit Result Page: " + message, error);
  }
}