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

import {Observable}              from 'rxjs';

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

import {PiwikService} from '../../utils/piwik/piwik.service';


@Component({
    selector: 'deposit-by-subject',
    template: `
        <div class="uk-margin-large-top">

                <h5>Or search for domain specific repositories</h5>

                <form class= "uk-grid">
                    <input type="text"  [(ngModel)]="subjectKeyword"  class="uk-margin-medium-left uk-padding-remove-left  uk-input" name="subject" placeholder="Type keywords (e.g Biology, Natural sciences, Social Sciences, Engineering Sciences... )"  style="width: 580px;" />

                    <button class=" uk-button portal-button"  type="submit" (click)="search()" >
                        Search
                    </button>
                </form>
        </div>
    `
})

export class DepositBySubjectComponent {
    @Input() subjectKeyword: string='';
    @Input() piwikSiteId = null;
    properties:EnvProperties;

    constructor (private _router: Router,private  route: ActivatedRoute,
                 private _meta: Meta, private _title: Title,
                 private _piwikService: PiwikService) { }
    ngOnInit() {
      this.route.data
        .subscribe((data: { envSpecific: EnvProperties }) => {
           this.properties = data.envSpecific;

           var title = "Deposit by Subjects";
           var description = "Openaire,  repositories, open access,  content provider, compatibility, organization, deposit by subject"
           var url = data.envSpecific.baseLink+this._router.url;

           this._title.setTitle(title);
           this._meta.updateTag({content:title},"property='og:title'");
           this._meta.updateTag({content:description},"name='description'");
           this._meta.updateTag({content:description},"property='og:description'");
           this._meta.updateTag({content:url},"property='og:url'");

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

        });

    }
    public search() {
      this._router.navigate( ['participate/deposit-subject-result'], { queryParams: { "subject": this.subjectKeyword } } );
    }
}