import { Component, Input, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import {ActivatedRoute} from '@angular/router';
import { EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
import {AlertModal} from '../../openaireLibrary/utils/modal/alert';

import {SubscribeService} from '../../openaireLibrary/utils/subscribe/subscribe.service';
import {Session} from '../../openaireLibrary/login/utils/helper.class';
@Component({
    selector: 'subscribe',
    template: `

    <span *ngIf="subscribed != null && !showNumbers">
      <div *ngIf="!subscribed && showLoginAlert" class="uk-alert-warning uk-animation-slide-bottom" uk-alert=""  >
      <a class="uk-alert-close" uk-close></a>
      <p>Please login first to subscribe</p>
      </div>
      <a *ngIf="!subscribed" class="uk-button uk-button-primary" (click)="subscribe()"> Subscribe</a>
      <a *ngIf="subscribed" class="uk-button uk-button-danger" (click)="confirmOpen()"> Unsubscribe</a>
    </span>

    <span *ngIf="showNumbers && subscribers !=null && subscribers > 0" >
        Members: {{subscribers}}
    </span>
    <modal-alert (alertOutput)="confirmClose($event)">
    </modal-alert>
    `
})

export class SubscribeComponent {
  // @Input() showSubscribe:boolean = true;
  @Input() showNumbers:boolean;
  @Input() communityId:string;


  subscribed:boolean = null;
  properties:EnvProperties;
  subscribers:number= null;
  showLoginAlert:Boolean = false;
  @ViewChild(AlertModal) alert;
  constructor (private route: ActivatedRoute,
      private _subscribeService: SubscribeService
    ) {
    }

    public ngOnInit() {
      this.route.data
          .subscribe((data: { envSpecific: EnvProperties }) => {
             this.properties = data.envSpecific;
             if(!this.showNumbers){
               var email = Session.getUserEmail();
               if(email == null){
                 this.subscribed = false;
               }else{
                 this._subscribeService.isSubscribedToCommunity(this.communityId, email,this.properties.adminToolsAPIURL).subscribe (
                   res => {
                     this.subscribed = res;
                   });
               }
             }else{
               this._subscribeService.getCommunitySubscribers(this.communityId, this.properties.adminToolsAPIURL).subscribe (
                 res => {

                    this.subscribers = (res && res.subscribers && res.subscribers.length )?res.subscribers.length:0;

                 });
             }
           });


    }

    subscribe(){
      var email = Session.getUserEmail();
      if(email == null){
        this.subscribed = false;
         this.showLoginAlert = true;
      }else{
        this.showLoginAlert = false;
        this._subscribeService.subscribeToCommunity(this.communityId, email, this.properties.adminToolsAPIURL).subscribe (
          res => {
             console.log(res);
             if(!this.subscribed){
               this.subscribed = true;
             }
          });
      }
    }

    unsubscribe(){
      var email = Session.getUserEmail();
      if(email == null){
        this.subscribed = false;
      }else{
        //this.properties.adminToolsAPIURL
        this._subscribeService.unSubscribeToCommunity(this.communityId, email,this.properties.adminToolsAPIURL).subscribe (
          res => {
             console.log(res);
             if(this.subscribed){
               this.subscribed = false;
             }
          });
      }
    }

    confirmOpen(){

        this.alert.cancelButton = true;
        this.alert.okButton = true;
        this.alert.alertTitle = "Unsubscribe community ";
        this.alert.message = "Do you want to proceed? ";
        this.alert.okButtonText = "Yes";
        this.alert.cancelButtonText = "No";
        this.alert.open();
      }
      confirmClose(data){
       this.unsubscribe();
     }
}