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';

declare var UIkit: any;

@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 portal-button' + (loading ? ' uk-disabled' : '')" (click)="subscribe()"> Subscribe</a>
      <a *ngIf="subscribed" [class]="'uk-button uk-button-danger' + (loading ? ' uk-disabled' : '')" (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;

  loading: boolean = false;
  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.loading = true;
        this.showLoginAlert = false;
        this._subscribeService.subscribeToCommunity(this.communityId, email, this.properties.adminToolsAPIURL).subscribe (
          res => {
            this.loading = false;
             console.log(res);
             if(res.status && res.status != 200) {
               UIkit.notification({
                   message : '<strong>There was an error in your subscription. Please try again!<strong>',
                   status  : 'warning',
                   timeout : 3000,
                   pos     : 'top-center'
               });
             } else {
               if(!this.subscribed){
                 this.subscribed = true;
               }
            }
          });
      }
    }

    unsubscribe(){
      var email = Session.getUserEmail();
      if(email == null){
        this.subscribed = false;
      }else{
        this.loading = true;
        //this.properties.adminToolsAPIURL
        this._subscribeService.unSubscribeToCommunity(this.communityId, email,this.properties.adminToolsAPIURL).subscribe (
          res => {
            this.loading = false;
            if(res.status && res.status != 200) {
              UIkit.notification({
                  message : '<strong>There was an error in your unsubscription. Please try again!<strong>',
                  status  : 'warning',
                  timeout : 3000,
                  pos     : 'top-center'
              });
            } else {
             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();
     }
}