import { Component, OnInit, Input } from '@angular/core';
import {TableModule} from 'primeng/table';
import {DropdownModule} from 'primeng/dropdown';
import {ButtonModule} from 'primeng/button';
import { StaffService } from '../shared/service/staff.service';
import { IStaff } from '../shared/core/IStaff';
import { SelectItem, DialogService } from 'primeng/components/common/api';
import { NewStaffComponent } from '../new-staff/new-staff.component';
import { ActivatedRoute } from '@angular/router';
import { IFilterKey } from '../shared/core/IFilterKey';

@Component({
  selector: 'app-staff-list',
  templateUrl: './staff-list.component.html',
  styleUrls: ['./staff-list.component.css'],
  providers:[StaffService,DialogService]
})
export class StaffListComponent implements OnInit {

  columns: { field: string; header: string;width:string }[];
  staffList:IStaff[]=[];
  filterlist: SelectItem[];
  allStaffList:IStaff[]=[];
  totalStaff:number;
  defaultId : string = '0';

  OrganisationId = "0";

  section = 'STAFF';
  filterKeys: IFilterKey[];
  
  constructor(private staffService:StaffService,public dialogService: DialogService, private route: ActivatedRoute) { }

  ngOnInit() {

     //getting org id from url
     this.OrganisationId = this.route.snapshot.paramMap.get("id");

     // list of the organisation table columns
     this.columns = [
      { field: 'FirstName', header: 'First name',width:'15%' },
      { field: 'LastName', header: 'Last name',width:'10%' },
      { field: 'RoleName', header: 'Role',width:'10%' },
      { field: 'Company.CompanyName', header: 'Company',width:'10%' },
      { field: 'Email', header: 'Email',width:'10%' },
      { field: 'Mobile', header: 'Mobile',width:'10%' },
      { field: 'Office', header: 'Office',width:'10%' },
      { field: 'Actions', header: 'Actions',width:'10%' }
    ];

    // initialize filter list
    this.filterlist = [];
    this.filterlist.push({label:'Internal organisations',value:'Type~Internal'});
    this.filterlist.push({label:'All external organisations',value:'Type~External'});

    // get staff list
    if(this.OrganisationId == null || this.OrganisationId ==""){ 
      this.getStaffList(this.defaultId);
    }else{
      this.getStaffListByCompany(this.OrganisationId);
    }
    
  }

  // get organisations from the backend
  getStaffList(id:string){ 
    this.staffService.getStaffList(id, this.filterKeys).subscribe(staffList=>
    {
      // bind organisation list
      this.staffList = staffList;
      this.allStaffList = staffList

      // bind total staffs
      this.totalStaff = this.allStaffList.length;

      if(id=='0'){

        // get available type list
        var filterByType = staffList.filter(x=>x.Company.Type);

        filterByType.forEach(element => {
          if(element.Company.Type!="Internal" && element.Company.Type!="External"){
          this.filterlist.push({label:'Type:'+element.Company.Type, value:'Type~'+element.Company.Type})
          }
        });
 
        // get available industry list
        var filterByIndustry = staffList.filter(x=>x.Company.Industry);

        filterByIndustry.forEach(element => {
          this.filterlist.push({label:'Industry:'+element.Company.Industry, value:'Industry~'+element.Company.Industry})
          
        });
    
        // get available roles
        var filterByRole = staffList.filter(x=>x.RoleName);
        filterByRole.forEach(element => {
          this.filterlist.push({label:'Role:'+element.RoleName, value:'Role~'+element.RoleName})
          
        });

        // get available companies
        var filterByCompanies = staffList.filter(x=>x.Company.Id);
        filterByCompanies.forEach(element => {
          this.filterlist.push({label:element.Company.CompanyName, value:'Company~'+element.Company.Id})
          
        });

        //remove duplicates
        this.filterlist = this.filterlist.map(e => e['value']).map((e, i, final) => final.indexOf(e) === i && i).filter(e => this.filterlist[e]).map(e => this.filterlist[e]);

      }
    })
  }

  // get organisations from the backend
  getStaffListByCompany(id:string){ 
    this.staffService.getStaffListByCompany(id).subscribe(staffList=>
    {
      // bind organisation list
      this.staffList = staffList;
      this.allStaffList = staffList

      // bind total staffs
      this.totalStaff = this.allStaffList.length;

      //if(id=='0'){

        // get available type list
        var filterByType = staffList.filter(x=>x.Company.Type);

        filterByType.forEach(element => {
          this.filterlist.push({label:'Type:'+element.Company.Type, value:'Type~'+element.Company.Type})
        });
 
        // get available industry list
        var filterByIndustry = staffList.filter(x=>x.Company.Industry);

        filterByIndustry.forEach(element => {
          this.filterlist.push({label:'Industry:'+element.Company.Industry, value:'Industry~'+element.Company.Industry})
          
        });
    
        // get available roles
        var filterByRole = staffList.filter(x=>x.RoleName);
        filterByRole.forEach(element => {
          this.filterlist.push({label:'Role:'+element.RoleName, value:'Role~'+element.RoleName})
          
        });

        // get available companies
        var filterByCompanies = staffList.filter(x=>x.Company.Id);
        filterByCompanies.forEach(element => {
          this.filterlist.push({label:element.Company.CompanyName, value:'Company~'+element.Company.Id})
          
        });

        //remove duplicates
        this.filterlist = this.filterlist.map(e => e['value']).map((e, i, final) => final.indexOf(e) === i && i).filter(e => this.filterlist[e]).map(e => this.filterlist[e]);

      //}
    })
  }

  // filter the staff list
  bindFilter(value:string){

    // show all companies
    if(value==null){
      this.staffList = this.allStaffList
    }
    else{
      var columnType = value.replace(/~\S+/, '');  // get filter column type
      var columnValue = value.replace(/[A-z]+~/, ''); // get filter value

      // filter by org type
      if(columnType=="Type"){

        if(columnValue == "External"){
          this.staffList = this.allStaffList.filter(x=>x.Company.Type!=="Internal")
        }
        else
        this.staffList = this.allStaffList.filter(x=>x.Company.Type===columnValue)
        
      }
      // filter by industry
      else if(columnType=="Industry"){
        this.staffList = this.allStaffList.filter(x=>x.Company.Industry===columnValue)
      }
      // filter by role
      else if(columnType=="Role"){
        this.staffList = this.allStaffList.filter(x=>x.RoleName===columnValue)
      }
      // filter by company
      else if(columnType=="Company"){
        this.staffList = this.allStaffList.filter(x=>x.Company.Id.toString()===columnValue)
      }
    }
  }

  //show add/edit staff dialog box
  showAddStaff(id:string) {
    
    const ref = this.dialogService.open(NewStaffComponent, {
        data: {
            id: id
        },
        header: (id=='-1') ? 'Invite Staff' : 'Edit staff',
        width: '80%',
        closable:false
    });

    // execute when close the add new popup
    ref.onClose.subscribe(data=>{
      // for editing
      if(id!="" && id != null && id !=undefined && id !="-1"){
        this.staffService.getStaffList(id, null).subscribe(staff=>
        {
          // update the edited staff
          var index = this.staffList.findIndex(x=>x.Id == id);
          this.staffList.find[index] = staff[0];          
        });
      }
      // for add new
      else{
        if(data!="-1"){
        this.staffService.getStaffList(id, null).subscribe(staff=>
        {
          // push the new staff to the list
          this.staffList.push(staff[staff.length-1]);
        });
      }
      }
    });

  }

  // filter organisation list
  filterStaffs(filterKeys:IFilterKey[]){
    console.log("FILTERED");
    console.log(filterKeys);
    this.filterKeys = filterKeys;

    // get staff list
    this.getStaffList("0");
  }
  
}