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

import {Observable}                 from 'rxjs/Observable';
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';

@Component({
    selector: 'deposit-result',
    template: `
    <div id="tm-main" class=" uk-section  uk-margin-small-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 ">

        <div class="uk-container uk-margin-top">
            <!--div class="uk-article-title custom-article-title">
                Deposit {{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 || (status == errorCodes.LOADING && fetchDataproviders.searchUtils.status == errorCodes.LOADING)"
                      class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><img class="loading-gif  uk-align-center" >
                </div>


                <!--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 uk-button-default"  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-->


                <div *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
                    <h2 *ngIf="organization" 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>
                    </h2>


                </div>

                <div *ngIf="fetchDataproviders.searchUtils.totalResults > 0">
                    <p class="uk-text-meta">Please use the information below and contact your repository to deposit your <span class="uk-text-lowercase">{{requestFor}}</span>.</p>
                    <!--showDataProviders [dataProviders]=dataProviders></showDataProviders-->
                    <div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults > 10">
    					<!--a [href] = "linkToSearchDataproviders">
    						View all {{fetchDataproviders.searchUtils.totalResults | number}} results <span class="uk-icon">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
    </span>
    					</a-->

                        <a  [queryParams]="routerHelper.createQueryParams(['organizationId', 'og'], [organizationId, 'and'])"
                            routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders" class="uk-button uk-button-text">
                            View all {{fetchDataproviders.searchUtils.totalResults | number}} results
                        </a>
    				</div>
                    <search-result  [(results)]="fetchDataproviders.results"
                                    [(status)]= "fetchDataproviders.searchUtils.status"
                                    type="dataprovider" urlParam="datasourceId" [showOrganizations] = false
                                    [custom_class]="'other-results'" [(properties)] =properties>
                    </search-result>
                </div>


                <div *ngIf="(fetchDataproviders.searchUtils.totalResults == 0 && status == errorCodes.DONE)
                            || status == errorCodes.NOT_FOUND || status == errorCodes.ERROR || status == errorCodes.NOT_AVAILABLE" class = "alert alert-warning">
                    <div *ngIf="organization">
                        <span *ngIf="fetchDataproviders.searchUtils.status == errorCodes.ERROR">
                            An error occured.
                        </span>
                        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="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="organizationId == ''">
                        No ID for organization.
                    </div>

                    You can still deposit your {{requestFor}} in
                    <a href="{{zenodo}}" target="_blank">OpenAIRE's Zenodo catch-all repository (<i class="custom-external"></i>)</a>
                    hosted by CERN.
                </div>
              </div>
              <helper position="right" styleName=" uk-width-1-5"></helper>
            </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() 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 = "";

  public status: number;
  public warningMessage: string = "";

  public fetchDataproviders : FetchDataproviders;
  public linkToSearchDataproviders: string = "";

  // url of Zenodo
  public zenodo: string;

  public routerHelper:RouterHelper = new RouterHelper();
  public errorCodes:ErrorCodes = new ErrorCodes();

  sub: any; piwiksub: any;
  properties:EnvProperties;

  constructor ( private _router: Router,
                private  route: ActivatedRoute,
                private _searchDataprovidersService: SearchDataprovidersService,
                private _organizationService: OrganizationService,
                private _meta: Meta,
                private _title: Title,
                private _piwikService:PiwikService) {

      this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);

      this.status = this.errorCodes.LOADING;

      var description = "Deposit "+this.requestFor;
      var title = "Openaire, repositories, open access, content provider, compatibility, organization, deposit "+ this.requestFor;

      this.updateTitle(title);
      this.updateDescription(description);

    }
    ngOnInit() {
      this.route.data
        .subscribe((data: { envSpecific: EnvProperties }) => {
           this.properties = data.envSpecific;
           this.zenodo = this.properties.zenodo;
           this.updateUrl(data.envSpecific.baseLink+this._router.url);

           if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
             this.piwiksub = this._piwikService.trackView(this.properties, "Deposit "+this.requestFor, this.piwikSiteId).subscribe();
           }
        });

        console.info('depositResult init');

        this.sub =  this.route.queryParams.subscribe(params => {
            this.organizationId = params['organizationId'];
            console.info("Id is :"+this.organizationId);
            if(this.organizationId){
                this.getOrganizationInfo();
            }
            this.selectedId = "";
        });
    }

    ngDoCheck() {
        if(this.organizationId == "" || this.organizationId == undefined) {
            this.organizationId = "";
            this.status = this.errorCodes.ERROR;
        }
    }

    ngOnDestroy() {
      this.sub.unsubscribe();
      if(this.piwiksub){
        this.piwiksub.unsubscribe();
      }
    }

    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, 1, 10, this.properties);
        //}
        this.linkToSearchDataproviders = this.properties.searchLinkToDataProviders;
    }

    private getOrganizationInfo ()  {
        console.info("inside getOrganizationInfo of component");

        this._organizationService.getOrganizationInfo(this.organizationId,this.properties).subscribe(
            data => {
                if(data == null) {
                  this.status = this.errorCodes.NOT_FOUND;
                } else {
                  this.organization = data.title;
                  this.status = this.errorCodes.DONE;
                  this.searchDataproviders();
                }
            },
            err => {
                //console.log(err)

                if(err.status == '404') {
                  this.status = this.errorCodes.NOT_FOUND;
                  console.info("not found");
                } else if(err.status == '500') {
                  this.status = this.errorCodes.ERROR;
                  console.info("error");
                } else {
                  this.status = this.errorCodes.NOT_AVAILABLE;
                  console.info("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) {
        console.info("organization selected");
        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'");
    }
}