import { Component, OnInit, OnChanges } from '@angular/core';
import { IOrganisation } from '../shared/core/IOrganisation';
import {TableModule} from 'primeng/table';
import {DropdownModule} from 'primeng/dropdown';
import { OrganisationService } from '../shared/service/organisation.service';
import { SelectItem } from 'primeng/components/common/api';
import {ButtonModule} from 'primeng/button';
import {DialogService} from 'primeng/api';
import { NewOrganisationComponent } from '../new-organisation/new-organisation.component';
import { LoginHistoryService } from '../shared/service/login-history.service';
import { IFilterKey } from '../shared/core/IFilterKey';

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

  columns: { field: string; header: string; width:string}[];
  organisations:IOrganisation[]=[];
  filterlist: SelectItem[];
  allOrgList:IOrganisation[]=[];

  industryList : IOrganisation[];
  typeList : IOrganisation[];
  totalCompanies : number = 0;

  //this will hold search box value
  searchQuery : string ="";

  section = 'ORG';
  filterKeys: IFilterKey[];
  recordsList:SelectItem[]=[];
  recordsCount = 10;

  constructor(private organisationService:OrganisationService,public dialogService: DialogService, private loginHistoryService: LoginHistoryService) { }

  ngOnInit() {

    // list of the organisation table columns
    this.columns = [
      // { field: 'Logo', header: '',width: '3%' },
      { field: 'CompanyName', header: 'Company name',width: '15%' },
      { field: 'Staff', header: 'Staff' , width: '8%'},
      { field: 'Type', header: 'Type', width: '10%' },
      { field: 'Country', header: 'Country',width: '10%' },
      { field: 'Website', header: 'Website',width: '15%' },
      { field: 'Email', header: 'Email',width: '12%' },
      { field: 'Phone', header: 'Phone',width: '15%' },
      { field: 'Industry', header: 'Industry',width: '10%' },
      { field: 'LogoUrl', header: 'LogoUrl',width: '5%' }
  ];
  
  // 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 organisation list
  this.geOrganisations('0');

  // set records per page list
  this.recordsList = [
    {label:'5 records per page',value:5},
    {label:'10 records per page',value:10},
    {label:'15 records per page',value:15}
  ]
}
ngOnChanges(){
  
}

// get organisations from the backend
geOrganisations(id:string){
  this.organisationService.getOrganisations(id,this.filterKeys).subscribe(companies=>
    {
      this.totalCompanies = companies.length;
      // bind organisation list
      this.organisations = companies;
      this.allOrgList = companies

      this.getFilters();

      this.industryList = this.allOrgList.filter(x =>x.Industry !="");
      this.typeList = this.allOrgList.filter(x=>x.Type != "");


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

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

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

      //   filterByIndustry.forEach(element => {
      //     this.filterlist.push({label:'Industry:'+element.Industry, value:'Industry~'+element.Industry})
          
      //   });
    
      //   //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 organisation list
  bindFilter(value:string){ 
    // debugger;

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

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

        if(columnValue == "External"){
          this.organisations = this.allOrgList.filter(x=>x.Type!=="Internal")
        }
        else{
          this.organisations = this.allOrgList.filter(x=>x.Type===columnValue)
        }
      }
      // filter by industry
      else if(columnType[0]=="Industry"){
        this.organisations = this.allOrgList.filter(x=>x.Industry===columnValue)
      }
    }
  }

  //this method call service for filters list
  getFilters(){
    this.loginHistoryService.getFilters().subscribe(f =>{
      //filters list as a response from service
      f.forEach(element => {
        var columnValue = element.value.replace(/[A-z]+:/, '');
        if(this.industryList.findIndex(x=>x.Industry== columnValue) > -1){
          this.filterlist.push(element)
        }

        if(this.typeList.findIndex(x=>x.Type== columnValue) > -1){
          this.filterlist.push(element)
        }
        
      })
      //this.filterlist = f;


    })
  }

  // show add/edit organisation dialog box
  showAddOrganisation(id:number) {
    const ref = this.dialogService.open(NewOrganisationComponent, {
        data: {
            id: id // bind company id
        },
        header: (id==0) ? 'Add Organisation' : 'Edit organisation',
        width: '70%',
        closable:false,
    });

    // execute when close the add new popup
    ref.onClose.subscribe(data=>{
      // for editing
      if(id>0){
        this.organisationService.getOrganisations(id.toString(),null).subscribe(company=>
        {
          // update the edited organisation
          var index = this.organisations.findIndex(x=>x.Id == id);
          this.organisations[index] = company[0];          
        });
      }
      // for add new
      else if(data > 0){
        this.organisationService.getOrganisations(id.toString(),null).subscribe(company=>
        {
          // push the new organisation to the list
          this.organisations.push(company[company.length-1]);
        });
      }
    });
  }

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

    this.filterKeys = filterKeys;

    // get organisation list
    this.geOrganisations('0');

  }
}