import {Component, OnDestroy, OnInit} from "@angular/core";
import {properties} from "../../../../environments/environment";
import {ActivatedRoute, Router} from "@angular/router";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import {Subscriber} from "rxjs";

@Component({
  selector: 'indicator-themes-page',
  template: `
		<div class="uk-visible@m">
			<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
				<div class="uk-padding-small uk-padding-remove-horizontal">
					<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
				</div>
			</div>
			<div class="uk-container uk-container-large uk-section">
				<h1>Indicator Themes<span class="uk-text-primary">.</span></h1>
				<div class="uk-section">
					<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
						<div class="uk-width-3-5">
							<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
						</div>
						<div class="uk-width-expand">
							<div>
								<h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
								<p>
									This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. We are at your disposal, should you have any recommendations!
								</p>
								<p>
									Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
									<a [routerLink]="['../organization']" [relativeTo]="route">research institutions</a> and
									<a [routerLink]="['../ri']" [relativeTo]="route">research initiatives</a>)
									for the specific indicators for each type of dashboard, and the  <a [routerLink]="['../../methodology']" [relativeTo]="route">methodology and terminology</a> page on how we produce the metrics.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="uk-hidden@m">
			<div class="uk-section uk-container uk-container-large">
				<h1 class="uk-heading-small uk-text-center uk-padding-small uk-padding-remove-vertical">Indicator Themes<span class="uk-text-primary">.</span></h1>
				<div class="uk-text-center uk-margin-large-top">
					<div class="uk-padding-small uk-padding-remove-vertical">
						<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
					</div>
					<div>
						<h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5>
						<p>
							This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. We are at your disposal, should you have any recommendations!
						</p>
						<p>
							Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
							<a [routerLink]="['../organization']" [relativeTo]="route">research institutions</a> and
							<a [routerLink]="['../ri']" [relativeTo]="route">research initiatives</a>)
							for the specific indicators for each type of dashboard, and the  <a [routerLink]="['../../methodology']" [relativeTo]="route">methodology and terminology</a> page on how we produce the metrics.
						</p>
					</div>
				</div>
			</div>
		</div>
  `
})
export class IndicatorThemesComponent implements OnInit, OnDestroy {
  private subscriptions: any[] = [];
  public properties = properties;
  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - Themes'}];
  
  constructor(private router: Router,
              private meta: Meta,
              private title: Title,
              private seoService: SEOService,
              public route: ActivatedRoute) {
  }
  
  ngOnInit() {
    this.subscriptions.push(this.route.params.subscribe(params => {
      const description = "Monitor | Indicator Themes";
      const title = "Monitor | Indicator Themes";
      this.metaTags(title, description);
      this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
      this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
    }));
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }
  
  metaTags(title, description) {
    const url = properties.domain + properties.baseLink + this.router.url;
    this.seoService.createLinkForCanonicalURL(url, false);
    this.meta.updateTag({content: url}, "property='og:url'");
    this.meta.updateTag({content: description}, "name='description'");
    this.meta.updateTag({content: description}, "property='og:description'");
    this.meta.updateTag({content: title}, "property='og:title'");
    this.title.setTitle(title);
  }
}