import { Component, OnInit , HostListener, ElementRef, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { OrganisationService } from '../shared/service/organisation.service';
import { IOrganisation } from '../shared/core/IOrganisation';
import { environment } from '../environments/environment';
import { ICompanyConatctDetails } from '../shared/core/ICompanyContactDetails';
import { IAddress } from '../shared/core/IAddress';
import { ActivatedRoute } from '@angular/router';
import { StaffListComponent } from '../staff-list/staff-list.component';

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

  OrganisationId : string = '0';
  //this use to hide and show big nav bar and small nav bar
  regularMenu :boolean;
  //tab links for tab view
  items: MenuItem[];
  //data bind var for organization profile
  orgProfile : IOrganisation;
  //data bind var for company contact details
  orgContact : ICompanyConatctDetails;
  //data bind for address
  orgAddress : IAddress;
  //for hide and show public, privat note fields
  showOrgProfileTabs = false;
  
  // staff list child component
  @ViewChild(StaffListComponent) staffListComponent:StaffListComponent;

  constructor(private organisationService : OrganisationService, private eRef: ElementRef, private route: ActivatedRoute) { }

  ngOnInit() { 
    //getting org id from url
   this.OrganisationId = this.route.snapshot.paramMap.get("id").toString();
  this.showOrgProfileTabs = true;
   //calling tab method
   this.prepareTabs();
   
   //calling method
   this.getOrganization(this.OrganisationId);

   //calling method
   this.getOrgContact(this.OrganisationId);

   //calling method
   this.getOrdAddress(this.OrganisationId);
  }

  //this method call service to get organization main details
  getOrganization(id?: string){
    this.organisationService.getOrganisations(id,null).subscribe(org=>
    {
      //orgProfile fill with response
      this.orgProfile = org[0]; 
      //this.orgProfile.LogoUrl = this.getOrgLogoUrl(this.orgProfile.LogoUrl);
    })
  }

  //this method call service to get organization contact details
  getOrgContact(id?: string){    
    this.organisationService.getOrgContactDetails(id).subscribe(con =>
    {
      //orgConatct fill with response
      this.orgContact = con;
    })
  }

  //this method call service to get organization address details
  getOrdAddress(id?: string){    
    this.organisationService.getOrgAddress(id).subscribe(add=>
    {
      //orgAddress fill with response
      this.orgAddress = add;
      console.log(this.orgAddress);
    })
  }

  //this method will simply check if org url is empty, then use default image url
  getOrgLogoUrl(url:string){
    return (!url)?(environment.imageLocation + "default.png"):(environment.imageLocation + url);
  }

  //this method prepare tab 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/'+this.OrganisationId+'/Profile/' +this.OrganisationId , command: (event) => { 
        this.showOrgProfileTabs = true;
        }
      },
      {
        label: 'Staff',routerLink:'Staff/'+this.OrganisationId, command: (event) => {
        this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Logged Time', routerLink:'Loggedtime', command: (event) => {
        this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Activities', routerLink:'Activities/'+this.OrganisationId, command: (event) => {
        this.showOrgProfileTabs = false;
        }
      },
      {
        label: 'Event Calendar', routerLink:'EventCalendar/'+this.OrganisationId, 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;
    }
  }
  

}