import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProvisionsService } from '../services/provisions.service'; 
import { UsersService } from '../services/users.service';
import { MDBModalService } from 'angular-bootstrap-md';
import { ModalInfoComponent } from '../modals/modalinfo.component';
import { ProvisionModalComponent } from '../modals/edit-provision.component';


@Component({
  selector: 'user-dashboard',
  templateUrl: './user-dashboard.component.html',
  styleUrls: ['./user-dashboard.component.scss']
})
export class UserDashboardComponent implements OnInit, OnDestroy{

    id: string;
    provisions;
    destroys;
    user;
    private sub: any;
    private instantSubs: any;
    public selectedprov: Object = null;
    history: Boolean = false;


    logShow: boolean = false;
    logstype: String = 'provision';

    constructor(private modalService: MDBModalService,private route: ActivatedRoute, private _provisionsService: ProvisionsService, private _userService: UsersService) { }
    
    
    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.id = params['id']; // (+) converts string 'id' to a number
     
            console.log("user Id", this.id);

            this.instantSubs = this._provisionsService.getProvisionsByUser(this.id).subscribe( provisions=>{
                provisions = provisions.results;
                this.provisions = provisions.filter(p => !p.destroy || !p.destroy.status || p.destroy.status !== 'destroyed');
                this.destroys = provisions.filter(p => p.destroy && p.destroy.status === 'destroyed');
                this.instantSubs.unsubscribe();
            });

            this._userService.getUserById(this.id).subscribe( user=> {
                this.user = user;
            })
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }

    showLogs($event, provision, type): void {
        $event.preventDefault();
        $event.stopPropagation();
        this.logstype = type;
        this.logShow = false;
        this.selectedprov = provision;
        this.logShow = true;
    }

    toggleHistory(): void {
      this.history = !this.history;
    }

    onLogsClose(): void {
        this.selectedprov = null;
        this.logShow = false;
    }

    onImgError(event, user){
        event.target.src = 'https://ui-avatars.com/api/?name='+user.displayName+'&background=random&size=40'
    }

    openModal(provision) {
        this.modalService.show(ModalInfoComponent, {
          class: 'modal-lg',
          containerClass: '',
          data: {
            info:provision
          }
        } );
    }

    openScheduleModal(provision) {
        var modalRef = this.modalService.show(ProvisionModalComponent, {
          class: 'modal-lg modal-notify',
          containerClass: '',
          data: {
            provision: provision
          }
        } );
    
        var sub = modalRef.content.action.subscribe( (data: any) => { 
          sub.unsubscribe();
          
          console.log("openScheduleModal returns", data);
        });
    }

}
