import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";

import {RemoveContentProvidersComponent} from './remove-content-providers.component';

import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
import {Title} from '@angular/platform-browser';
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../environments/environment";
import {Subscriber} from "rxjs";

@Component({
  selector: 'manage-content-providers',
  template: `
    <remove-content-providers (toggleView)="toggleAction()" [communityContentProviders]="communityContentProviders"
                     [showLoading]="showLoadingInRemove"
                     (communityContentProvidersChanged)="communityContentProvidersChanged($event)" [toggle]="toggle">
    </remove-content-providers>
    <fs-modal #fsModal (cancelEmitter)="toggleAction()">
      <div actions class="uk-flex uk-flex-middle uk-height-1-1">
        <span class="uk-button uk-text-secondary" uk-icon="icon: info; ratio: 1.3"></span>
        <div *ngIf="communityId" uk-drop="mode: hover">
          <div class="uk-card uk-card-body uk-card-default">
            If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant.
            Feel free to contact us
            (<a
            [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ communityId + '] report missing Funder' + '&body=' + body"
            target="_top">{{properties.feedbackmailForMissingEntities}}</a>)
            to let us know and we'll try to get the provider on board!
          </div>
        </div>
      </div>

      <add-content-providers [communityContentProviders]="communityContentProviders"
                    (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></add-content-providers>
    </fs-modal>
  `
})

export class ManageContentProvidersComponent implements OnInit {
  @Input() communityContentProviders = [];
  @ViewChild(RemoveContentProvidersComponent) removeContentProvidersComponent: RemoveContentProvidersComponent;
  @ViewChild('fsModal', { static: true }) fullscreen: FullScreenModalComponent;

  public toggle: boolean = false;

  private subscriptions: any[] = [];

  public showLoadingInRemove: boolean = true;

  public body: string = "Send from page";
  public properties: EnvProperties = properties;
  public communityId: string = "";

  constructor(private element: ElementRef,
              private title: Title,
              private route: ActivatedRoute, private _router: Router) {
  }

  ngOnInit() {
    this.subscriptions.push(this.route.params.subscribe(params => {
      this.communityId = params['community'];

      if (this.communityId) {
        this.title.setTitle(this.communityId.toUpperCase() + ' | Content Providers');
        this.body = "[Please write your message here]";
        this.body = StringUtils.URIEncode(this.body);
      }
    }));

    this.fullscreen.title = "Search and Add Content Providers";
    this.fullscreen.okButtonText = "Done";
    this.fullscreen.okButton = true;
  }

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

  public toggleAction() {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
      });
    } else {
      HelperFunctions.scroll();

      this.toggle = !this.toggle;
      if (this.toggle) {
        this.fullscreen.open();
      }
    }
  }

  public communityContentProvidersChanged($event) {
    this.communityContentProviders = $event.value;
    this.showLoadingInRemove = false;

    if (this.toggle) {
      this.removeContentProvidersComponent.applyFilters();
    }
  }
}