import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommunityInfo} from "../openaireLibrary/connect/community/communityInfo";
import {CommunityService} from "../openaireLibrary/connect/community/community.service";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {properties} from "../../environments/environment";
import {Router} from "@angular/router";
import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";

@Component({
  selector: 'develop',
  template: `
      <div class="uk-section">
				<div class="uk-container uk-container-large">
						<h1>Help developers <br> with OpenAIRE APIs<span class="uk-text-primary">.</span></h1>
				</div>
				<div class="uk-section uk-container uk-container-large">
					<div class="uk-grid uk-grid-large uk-child-width-1-2@m" uk-grid>
						<div class="uk-text-center uk-margin-large-top">
							<div class="uk-width-2-3@m uk-margin-auto@m">
								<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto">
									<icon name="description" customClass="uk-text-background" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.RESULTS}}"></icon>
								</div>
								<h3>For {{openaireEntities.RESULTS | lowercase}}</h3>
								<div class="uk-margin-bottom">
									For {{openaireEntities.RESULTS | lowercase}} ({{openaireEntities.PUBLICATIONS | lowercase}}, {{openaireEntities.DATASETS | lowercase}}, {{openaireEntities.SOFTWARE | lowercase}} and {{openaireEntities.OTHER | lowercase}}) you can use the Selective Access APIs by adding the community parameter.
								</div>
								<a class="uk-display-inline-block uk-button uk-button-text"
										href="https://graph.openaire.eu/develop/api.html" target="_blank">
									<span class="uk-flex uk-flex-middle">
										<span>Selective Access APIs</span>
									</span>
								</a>
							</div>
						</div>
						<div class="uk-flex uk-flex-center">
							<img src="assets/common-assets/apis.svg" alt="APIs" loading="lazy">
						</div>
					</div>
				</div>
				<div class="uk-section uk-container uk-container-large">
					<div class="uk-width-1-2@m uk-margin-auto@m">
						<div>
							<div>Request examples:</div>
							<ul class="uk-list uk-list-large uk-list-bullet uk-list-primary">
								<li>
									<span class="uk-text-bold">Access “{{openaireEntities.PUBLICATIONS}}”</span><br>
									<span class="uk-text-bold uk-margin-small-right">GET</span>
									<span class="">https://api.openaire.eu/search/publications?community={{community.communityId}}</span>
								</li>
								<li>
									<span class="uk-text-bold">Access “Open Access {{openaireEntities.PUBLICATIONS}}”</span><br>
									<span class="uk-text-bold uk-margin-small-right">GET</span>
									<span class="uk-text-break">http://api.openaire.eu/search/publications?community={{community.communityId}}&OA=true</span>
								</li>
								<li>
									<span class="uk-text-bold">Access “{{openaireEntities.DATASETS}}”</span><br>
									<span class="uk-text-bold uk-margin-small-right">GET</span>
									<span class="uk-text-break">https://api.openaire.eu/search/datasets?community={{community.communityId}}</span>
								</li>
								<li>
									<span class="uk-text-bold">Access “{{openaireEntities.SOFTWARE}}”</span><br>
									<span class="uk-text-bold uk-margin-small-right">GET</span>
									<span class="uk-text-break">https://api.openaire.eu/search/software?community={{community.communityId}}</span>
								</li>
								<li>
									<span class="uk-text-bold">Access “{{openaireEntities.OTHER}}”</span><br>
									<span class="uk-text-bold uk-margin-small-right">GET</span>
									<span class="uk-text-break">https://api.openaire.eu/search/other?community={{community.communityId}}</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
  `
})
export class DevelopComponent implements OnInit, OnDestroy {
  
  public community: CommunityInfo;
  public openaireEntities = OpenaireEntities;
  public properties: EnvProperties = properties;

  private subscriptions: any[] = [];
  
  constructor(private communityService: CommunityService,
              private seoService: SEOService,
              private _meta: Meta,
              private _router: Router,
              private _title: Title) {
  }
  
  ngOnInit() {
    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
      this.community = community;
      if (this.community) {
        /* Metadata */
        const url = properties.domain + properties.baseLink + this._router.url;
        this.seoService.createLinkForCanonicalURL(url, false);
        this._meta.updateTag({content: url}, "property='og:url'");
        const description = "Develop | " + this.community.shortTitle;
        const title = "Develop | " + this.community.shortTitle;
        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);
      }
    }));
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
}