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

import {RemoveContentProvidersComponent} from './remove-content-providers.component';
import {AddContentProvidersComponent} from './add-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";

@Component({
    selector: 'manage-content-providers',
    template: `
      <div id="manage-content-providers">
        <div class="menubar uk-margin-bottom ">
          <a *ngIf="!toggle" (click)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>
          <div class="manage-content-providers-title uk-text-large">{{pageTitle}}</div>
        </div>

        <div class="toggle-usage">
          <remove-content-providers (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></remove-content-providers>
          <fab (clicked)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage"></fab>
        </div>
        <div class="toggle-usage" hidden>
          <add-content-providers [(communityContentProviders)]="communityContentProviders"></add-content-providers>
        </div>
      </div>
    `
})

export class ManageContentProvidersComponent implements OnInit {
  private community: string = '';

  @Input() communityContentProviders =[];
  @ViewChild (RemoveContentProvidersComponent) removeContentProvidersComponent : RemoveContentProvidersComponent ;
  @ViewChild (AddContentProvidersComponent) addContentProvidersComponent : AddContentProvidersComponent ;

  public warningMessage = "";
  public infoMessage = "";

  public toggle: boolean = true;
  public updateCommunityContentProvidersOnToggle: boolean = false;
  public pageTitle: string = "Manage content providers";
  public toggleLinkMessage: string = "Manage content providers";

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      if(params['communityId']) {
        this.community = params['communityId'];
      }
      HelperFunctions.scroll();
    });
  }

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

  public ngOnDestroy() {}

  public updateCommunityContentProviders() {
    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.pageTitle = "Manage content providers";
        //this.toggleLinkMessage = "Missing content providers?";

        this.removeContentProvidersComponent._getCommunityContentProviders();
        this.addContentProvidersComponent.undo = {};
      } else {
        this.updateCommunityContentProvidersOnToggle = false;
        this.pageTitle = "Search content providers";
        //this.toggleLinkMessage = "Manage content providers";
      }
    }
  }

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