import { Component, OnInit, Input } from '@angular/core';
import { TreeNode, DialogService } from 'primeng/api';
import { OrganisationService } from '../shared/service/organisation.service';
import { StaffAdditionalAccessComponent } from '../staff-additional-access/staff-additional-access.component';
import { NewStaffComponent } from '../new-staff/new-staff.component';
import { IOrganisation } from '../shared/core/IOrganisation';

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

  @Input() Organisation : IOrganisation;
  //defualt value for organisation
  defualtOrganisationId = "0";
  //defualt value for new staff
  defaultStaffId = '0';
  //these will keep unassigned staff list
  unAssignedStaffList: TreeNode[];
  //this will contain organisation chart data
  organisationChartData: TreeNode[];
  //this will use to keep temparary data
  tempChartData: TreeNode[];
  //this is use for currently selected node
  selectedNode : TreeNode;
  //when start dragging , this will contain that object
  draggedItem: any;
  
  constructor(private organisationService: OrganisationService, public dialogService: DialogService) { }

  ngOnInit() {
    //calling method and get unassigned list
    this.getUnassignedStaffList();
    //calling method and get organisation chart data list
    this.getOrganisationChartData();    
  }

  //calling service 
  getUnassignedStaffList(){
    this.organisationService.getUnassignedStaffList(this.Organisation.Id.toString()).subscribe(list =>{
      this.unAssignedStaffList = list;
      this.tempChartData = this.unAssignedStaffList;
    })    
  }

  //calling service
  getOrganisationChartData(){
    this.organisationService.getOrganisationChartStaffList(this.Organisation.Id.toString()).subscribe(list =>{
      this.organisationChartData = list;
    })    
  }

  setOrganisationChartData(){
    this.organisationService.saveOrganisationChartStaffList(this.organisationChartData).subscribe(res =>{

    })
  }

  //runs when click on a node
  onNodeSelect(event) {
    alert(event);
  }

  dragStart(event, item: any) {
    this.draggedItem = item;
    //console.log(this.draggedItem);
  }

  //initial item dopping to start design organisation chart
  dropInit(event){
    if(this.organisationChartData.length==0){
      this.organisationChartData.push(this.draggedItem);
      this.unAssignedStaffList.splice(this.unAssignedStaffList.findIndex(x => x.key == this.draggedItem.key),1);
    }   
  }

  //this triggers when drop
  drop(event, itemKey : string) { 
    //if the chart is initializing 
    if(this.organisationChartData.length==0){
      this.dropInit(event);
      return;
    }

    //if the chart is already initialized
    if (this.draggedItem) {
      for (var obj in this.organisationChartData) {
        //adding droped item to the chart object
        this.findObject(itemKey, this.organisationChartData[obj]);
      }
    }

  }

  //occurs when dragging end
  dragEnd(event) {
    this.draggedItem = null;
  }

  //show staff access as a dialog
  showAccessSettings(key : string){ ;
    const ref = this.dialogService.open(StaffAdditionalAccessComponent, {
      data: {
        //key means clicked staff id, pass to the access component
        id: key,
        organisationId : this.Organisation.Id.toString()
      },
      width: '70%'
    });
  }

  //show new staff component as a dialog
  addStaff(id : string, superior : string){
  

    const ref = this.dialogService.open(NewStaffComponent, {
      data: {
          id: id,
          superior : superior,
          company : this.Organisation
      },
      header: (id=='-1') ? 'Invite staff' : 'Edit staff',
      width: '70%'
  });
  }

  //this is a recursive method which will search the particualr element in deep nested object and add child items if matching found
  findObject(key: string, element: any) {
    //key is the selected parent key value
    if (element.key == key) { 
      //if the currently checking element key is matching to the selected parent's key, object pushed as a children
      element.children.push({
        key : this.draggedItem.key,
        label: this.draggedItem.label,
        type: 'person',
        styleClass: 'ui-person',
        expanded: true,
        data: { name: this.draggedItem.data.name, 'avatar': this.draggedItem.data.avatar, 'companyId' : this.draggedItem.data.companyId},
        children: []
      }); 
      //when pushing success, item will be removed from unassigned list
      this.unAssignedStaffList.splice(this.unAssignedStaffList.findIndex(x => x.key == this.draggedItem.key),1);
      return;
    } else {
      //if any element not found, goes to current element's children list and do checking matching element
      for (var obj in element.children) {
        this.findObject(key, element.children[obj]);
      }

      return null;
    }

  }


}