import { Component, OnInit, ViewChild, HostListener, ElementRef } from '@angular/core';
import { IStaff } from '../shared/core/IStaff';
import { StaffService } from '../shared/service/staff.service';
import { IAddress } from '../shared/core/IAddress';
import { IPersonSocialMedia } from '../shared/core/IPersonSocialMedia';
import { IPersonCustomSocialMedia } from '../shared/core/IPersonCustomSocialMedia';
import { LocalisationComponent } from '../localisation/localisation.component';
import { IRole } from '../shared/core/IRole';
import { PermissionsComponent } from '../permissions/permissions.component';
import { PermissionService } from '../shared/service/permission.service';
import { ActivatedRoute } from '@angular/router';
import { ILifeEvents } from '../shared/core/ILifeEvents';
import { MessageService } from 'primeng/api';
import { CommonService } from '../shared/service/common.service';

@Component({
  selector: 'app-staff-profile',
  templateUrl: './staff-profile.component.html',
  styleUrls: ['./staff-profile.component.css']
})
export class StaffProfileComponent implements OnInit {

  StaffId : string = "0";
  //variable for left menu
  regularMenu : boolean = true;
  //var for tab links
  items: any;
  //bind staff profile data
  staffProfile : IStaff;
  //bind staff address data
  staffAddress : IAddress;
  //bind staff social account details
  staffSocialAccounts : IPersonSocialMedia
  //bind staff custom social account detials
  customSocialAccounts : IPersonCustomSocialMedia[]
  //bind staff events
  LifeEvents : ILifeEvents[];
  //this will be true if the staff has permission
  showLocalisations : boolean
  //localisation as a child
  @ViewChild(LocalisationComponent) localisationComponent : LocalisationComponent
  //using for permission component as a input
  roleForPermission : IRole;
  //using for permission component as a input
  organisationIdForPermission : number;
  //permission as a child
  @ViewChild(PermissionsComponent) permissionComponent : PermissionsComponent;

  constructor(
    private staffService : StaffService, 
    private eRef: ElementRef, 
    private route: ActivatedRoute, 
    private messageService: MessageService,
    private commonService: CommonService) { }

  ngOnInit() {

    this.StaffId = this.route.snapshot.paramMap.get("id").toString();

    //method call to get staff permission
    this.getStaffPermission(this.StaffId);
    //this will create tab list
    this.prepareTabs();
    //call the method, used sample id value as 0
    this.getStaffProfile(this.StaffId);
    //call method, used sample id as 0
    this.getStaffAddress(this.StaffId);
    //call method, used sample id as 0
    this.getStaffSocialAccouts(this.StaffId);
    //call method
    this.getStaffCustomSocialAccounts(this.StaffId);
    //call method
    this.getStaffLifeEvents(this.StaffId);
  }

  //this method use to get staff details.as currently we use dummy data, we will get the '0'th element
  getStaffProfile(id?: string){
    let staff = id.toString();
    this.staffService.getStaffList(staff,null).subscribe( staff => {
      this.staffProfile = staff[0];

      //get staff role from staff object to input to permission component
      this.roleForPermission = staff[0].Role;
      //get staff company from staff object to input to permission component
      this.organisationIdForPermission = this.staffProfile.Company.Id;
      //console.log(this.roleForPermission)
    })
  }

  //this method call service and get staff address data
  getStaffAddress(id?: string){
    let staff = id.toString();
    this.staffService.getStaffAddress(staff).subscribe(address => {
      this.staffAddress = address;
    })

  }

  //call the service and get staff default social account list
  getStaffSocialAccouts(id?: string){
    let staff = id.toString();
    this.staffService.getStaffSocialAccounts(staff).subscribe(social =>{ 
      this.staffSocialAccounts = social;
    })
  }

  //call the service and get staff custom social account list
  getStaffCustomSocialAccounts(id? : string){
    let staff = id.toString();
    this.staffService.getStaffCustomSocialAccounts(staff).subscribe(custom =>{
      this.customSocialAccounts = custom;
    })
  }


  //call the service and get staff life events
  getStaffLifeEvents(id? : string){
    let staff = id.toString();
    this.staffService.getStaffEvents(staff).subscribe(events =>{
      this.LifeEvents = events;
    })
  }

  //this method will get staff permissions for hide and show functionality
  getStaffPermission(id: string) {
    this.commonService.getStaffPermission(id).subscribe(res =>{
      this.showLocalisations = res.ShowLocalisationTab;
    })
    
  }

  //this method will send staff data to the service to save
  saveStaff(){
    
    this.staffService.saveStaffProfile(this.staffProfile).subscribe(response =>{
      
      this.messageService.add({severity:'success', summary:'New Staff', detail:'Successfully saved!'});
    })
  }

  //this method will send staff localisation data to the service
  saveStaffLocalisation(){   
     
    console.log(this.localisationComponent.newLocalisationData);

    this.staffService.saveStaffLocalisation(this.localisationComponent.newLocalisationData).subscribe(response =>{
      console.log("Response : " + response);
    })
  }

  //this method use to save all data
  saveAll(){
    //call save methods one by one
    this.saveStaff();

    //if localisation compnent available, localisation data will be saved
    if(this.localisationComponent){
      this.saveStaffLocalisation();
    }

    //if permission component available, permission data also saved
    if(this.permissionComponent){
      this.permissionComponent.clickSavePermission();
      console.log(this.permissionComponent.staffPermissionComponent.permission);
    }
    
    
  }

  //this method will prepare tab items list
  prepareTabs(){
    // show page tab list, additionally public, private notes and organization chart will show only for Profile tab
    this.items = [
      {
        label: 'Profile', routerLink:'/OrgProfile', command: (event) => {
        //this.showOrgProfileTabs = true;
        }
      },
      {
        label: 'Staff',routerLink:'Staff', command: (event) => {
        //this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Logged Time', routerLink:'Loggedtime', command: (event) => {
        //this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Activities', routerLink:'Activities', command: (event) => {
        //this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Event Calendar', routerLink:'EventCalendar', command: (event) => {
        //this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Staff Review', routerLink:'StaffReview', command: (event) => {
        //this.showOrgProfileTabs = false;
        }
      },
   ];
  }

  
  //this method is to hide and show left nav bar
  @HostListener('document:click', ['$event'])  
  clickout(event) {
    //big nav bar as a html element
    var e = document.getElementById("bigLeftNav");
    //small nav bar as a html element
    var e2 = document.getElementById("smallLeftNav");

    //use to flag where click happened
    var insideClick = false;

    //checking where the click happend
    for(var x =0; x< event.path.length; x++){
      if(event.path[x]==e2 || event.path[x]==e){ 
        //if clicked inside small or big nav bar, loop breaks   
        insideClick=true; break;
      }else{
        insideClick = false;
      }
    }
   
    //hide and show regular left menu accordingly
    if(insideClick==true){
      this.regularMenu=true;
    }else{
      this.regularMenu=false;
    }
  }

}