import {Component, Input, OnInit} from '@angular/core';
import {Subscriber} from 'rxjs';

import {properties} from 'src/environments/environment';

import {CommunityService} from '../../connect/community/community.service';
import {ConnectHelper} from '../../connect/connectHelper';
import {UserManagementService} from '../../services/user-management.service';
import {HelperFunctions} from "../../utils/HelperFunctions.class";

@Component({
  selector: 'relatedTo',
  template: `
		<div *ngIf="(gateways && gateways.length > 0) || (otherCommunities && otherCommunities.length > 0)" class="sideInfoTitle">
			<span>Communities</span>
		</div>
		<!-- If there are any communities with dashboard -->
		<ng-container *ngIf="gateways && gateways.length > 0">
			<div class="uk-padding-small uk-flex">
				<div class="uk-width-2-3">
					<div class="uk-text-muted">Communities with gateway</div>
					<ul class="custom-list">
						<li *ngFor="let gateway of gateways">
							<a href="{{gateway.link}}" target="_blank" [attr.uk-tooltip]="gateway.labelContext">
								{{ gateway.labelContext.length > 26 ? gateway.labelContext.substr(0,25) + '&hellip;' : gateway.labelContext }}
								<span class="custom-external custom-icon space"></span>
							</a>
						</li>
					</ul>
				</div>
				<div class="uk-width-1-3 uk-position-relative">
					<img class="uk-position-bottom-right connect-image" src="assets/common-assets/connect_image_faded.png" alt="OpenAIRE Connect image">
				</div>
			</div>
		</ng-container>
		<!-- Other communities (without dashboards) -->
		<ng-container *ngIf="otherCommunities && otherCommunities.length > 0">
			<div class="uk-padding-small border-top">
				<div>
					<div *ngIf="gateways && gateways.length > 0" class="uk-text-muted">Other Communities</div>
					<ul class="custom-list" [ngClass]="{'uk-padding-remove uk-margin-remove': !gateways || gateways.length == 0}">
						<li *ngFor="let community of otherCommunities.slice(0, showNum); let i = index">
							{{community.labelContext}}
							<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
								<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
							</span>
							<span *ngIf="community.labelConcept && (currentCommunity == community.idContext)">
								: {{community.labelConcept}}
							</span>
						</li>
						<div *ngIf="showNum > threshold" class="uk-text-right">
							<a (click)="showNum = threshold;">View less</a>
						</div>
						<div *ngIf="otherCommunities.length > threshold && showNum == threshold" class="uk-text-right">
							<a (click)="showNum = otherCommunities.length;">View more</a>
						</div>
					</ul>
				</div>
			</div>
		</ng-container>
  `
})

export class RelatedToComponent implements OnInit {
  @Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[];

  public threshold: number = 3;
  public showNum: number = 3;
	public gateways = [];
	public otherCommunities = [];
	public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);
	private subscriptions = [];
  
  constructor(private communityService: CommunityService,
							private userManagementService: UserManagementService) {
  }
  
  ngOnInit() {
		this.contexts.sort(this.compare);
		let index = 0;
		this.contexts.forEach( context => {
			if(context.idContext) {
				this.subscriptions.push(
					this.userManagementService.getUserInfo().subscribe( user => {
						//- handling subscribe errors?
						this.subscriptions.push(
							this.communityService.getCommunityInfo(context.idContext).subscribe( community => {
								if(community && !ConnectHelper.isPrivate(community,user) && (this.currentCommunity != context.idContext)) {
									if(properties.environment == "beta") {
										context.link = 'https://beta.' + context.idContext + '.openaire.eu';
									} else {
										context.link = 'https://' + context.idContext + '.openaire.eu';
									}
									for(let gateway of this.gateways) {
										if(gateway.link == context.link) {
											return; // skips so that we don't get duplicate gateways
										}
									}
									this.gateways.push(context);
								} else {
									if(this.currentCommunity != context.idContext) {
										for(let other of this.otherCommunities) {
											if(other.idContext == context.idContext) {
												return; // skips so that we don't get duplicate communities because of the multiple concepts
											}
										}
									}
									this.otherCommunities.push(context);
								}
								index++;
								if(index == this.contexts.length) {
									this.gateways.sort(this.compare);
									this.otherCommunities.sort(this.compare);
								}
							})
						);
					})
				);
			}
		});
  }

	ngOnDestroy() {
		this.subscriptions.forEach(subscription => {
			if(subscription instanceof Subscriber) {
				subscription.unsubscribe();
			}
		});
	}
  
  public scroll() {
    HelperFunctions.scroll();
  }

	public compare(a, b) {
		if(a.labelContext < b.labelContext) {
			return -1;
		}
		if(a.labelContext > b.labelContext) {
			return 1;
		}
		return 0;
	}
}