import { AuthServiceService } from './../../../shared/auth-service.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { DashboardService } from './../../../shared/dashboard.service';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
import { UserService } from '../../../shared/user.service';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-unit-building-information-list',
  templateUrl: './unit-building-information-list.component.html',
  styleUrls: ['./unit-building-information-list.component.css']
})
export class UnitBuildingInformationListComponent implements OnInit {
  complex_list = [];
  building_types = [];
  building = [];
  isComplex = false;
  isBuildingType = false;
  selectedComplex = true;
  selectedType = true;
  selectedBuilding = true;
  dataList = [];
  pages= [];
  pageId: number;
  Ids = [];
  count: number;
  perPagePagenation: number;
  currentPage:number = 1;
  housing_complex_id = 'all';
  building_type_id = 'all';
  building_id = 'all';
  filtterStatus = 'all';
  selectedAll: any;
  userLoginId:number;
  serviceId:number;
  dataTableNumber: number = 5;
  absorpationListIds = [];
  dataListIds = [];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private modal: Modal,
    private userSer: UserService,
    private spinner: NgxSpinnerService,
    public authSer: AuthServiceService,
    private toastr: ToastrService,
    private dashboardSer: DashboardService,
    private http: HttpClient
  ) { }

  ngOnInit() {


            //init the values of permision boolean
   this.authSer.showAddBtn = false;
   this.authSer.showDeleteBtn = false;
   this.authSer.showEditBtn = false;
    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;


    this.route.params.subscribe(
      (parmas: Params) => {
        this.pageId =  +parmas['listPageId'];
        localStorage.setItem('pageIdActive', parmas['listPageId']);
        console.log(this.pageId);
      }
    );

    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
      res => {
        console.log(res);
        this.complex_list = res[('housing_complexes')];
        this.complex_list.splice(0, 0 ,  {
          id: 'all',
          name:'الكل'
        },
          );
        console.log(this.complex_list);
        
      },
      err => {
        console.log(err);
        
      }
    );

    this.route.parent.params.subscribe(
      (params:Params) => {
          this.userLoginId = params['userID'];
          this.serviceId = params['serviceID'];
         
  
          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
            (responce) => {
              console.log(responce);
              this.pages = responce['pages'];
              for(let i = 0; i< this.pages.length; i++) {
                if(this.pages[i].id == 67){
                  if(this.pages[i]['permissions'][0].name == 'unit_information') {
                    this.authSer.showAddBtn = true;
                    this.authSer.showEditBtn = true;
                    this.authSer.showDeleteBtn = true;
                  } else {
                    console.log('no permissions');
                  }
                } else {
                  console.log('no events');
                }
              }
              this.spinner.hide();
            },
            (error) => {console.log(error)}
          );
        }
      );

      console.log('current page',this.pageId)
      this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id , null , 67).subscribe(
        res => {
          console.log('x',res);
          this.dataList = res['units'];
          this.count = res['count'];
          this.perPagePagenation = res['per_page'];
        },
        err => {
          console.log(err);
          
        }

      );
    
  }

  getBuilding(event){
    this.building_type_id = event;
    this.building = [];
    this.building_id = 'all'

    if(event != 'all'){
      this.selectedType = false;
      this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
        res => {
          console.log(res);
          this.building = res['buildings'];
          const x = this.building.length
          this.building.splice(0, 0 ,  {
            id: 'all',
            building_name:'الكل'
          },
            );
            if(x > 0)
            this.isBuildingType= true;
            
        },
        err =>{
          console.log(err);
          
        }
      );
    }

    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log('x',res);
        this.dataList = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
      },
      err => {
        console.log(err);
        
      }

    );
    this.spinner.hide();
  }
  getBuildingID(event){
    this.building_id = event;
    if(event != 'all')
    this.selectedBuilding = false;
    else {
      this.selectedBuilding = true;

    }
    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log('x',res);
        this.dataList = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
      },
      err => {
        console.log(err);
        
      }

    );
    this.spinner.hide();
      
  }

 

   //make all checkbox of user checked 
   selectAll() {
    for (var i = 0; i < this.dataList.length; i++) {
      this.dataList[i].selected = this.selectedAll;
    }
  };

  checkIfAllSelected() {
    this.selectedAll = this.dataList.every(function(item:any) {
      return item.selected == true;
    });
  };

  getBuildingsType(event){
    console.log('sdsdsd',event);
    const id = event;
  this.housing_complex_id = id;
  console.log(id);
  this.isComplex = false;
  this.isBuildingType = false;
  this.selectedComplex = true;

  this.building_types = [];
  this.building = [];
  this.building_type_id = 'all'
  this.building_id = 'all';
  
  if(id != 'all'){
    this.selectedComplex = false;
    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
      res => {
        console.log(res);
        this.building_types = res[('building_types')];
        this.building_types.splice(0, 0 ,  {
          id: 'all',
          name:'الكل'
        },
          );
        if(this.building_types.length > 1)
        this.isComplex = true;

        console.log(this.isComplex);
        
      },
      err => {
        console.log(err);
        
      }
    );
  }
   
    
    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log('x',res);
        this.dataList = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
      },
      err => {
        console.log(err);
        
      }

    );
    this.spinner.hide();
  } 

  filtterFunc(data) {
    this.dataList =[];
    this.absorpationListIds = [];
    console.log(data.target.value);
    const dataSearch = data.target.value;     
    this.currentPage = 1;
    console.log('search curent page', this.currentPage);
    console.log('search page id', this.pageId);
    this.dashboardSer.getDataUSerSearchBarUnit( dataSearch ,this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null, 67).subscribe(
      res => {
        console.log(res);
        this.dataList = res['units'];
        console.log('hey',this.dataList)
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
        console.log('filtter count', this.count);
        console.log('filtter perPagePAgenation', this.perPagePagenation);
      },
      err => {
        console.log(err);
      }
    );
  };
  onPageChange(pagenationNumber) {
    this.spinner.show();
    this.currentPage = pagenationNumber;
    this.absorpationListIds = [];
    console.log(pagenationNumber);
    console.log(this.pageId);
    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log(res);
        this.dataList = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
        console.log('FFFFFF', this.absorpationListIds);
        this.spinner.hide();
      },
      err => {
        console.log(err);
        this.spinner.hide();
      }
    );
  }

  onGetValue(event) {
    this.spinner.show();
    this.absorpationListIds = [];
    this.dataTableNumber = event.target.value;
    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log(res);
        this.absorpationListIds = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
        this.spinner.hide();
      },
      err => {
        console.log(err);
        this.spinner.hide();
      }
    );
  };
  
  onGetValueFiltter(event) {
    console.log(event.target.value)
    this.spinner.show();
    this.dataList = [];
    const typeId = event.target.value;
    this.filtterStatus = event.target.value;
    console.log(this.filtterStatus);
    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
      res => {
        console.log(res);
        this.dataList = res['units'];
        this.count = res['count'];
        this.perPagePagenation = res['per_page'];
        this.spinner.hide();
        console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
      },
      err=> {
        console.log(err);
      }
    );
  }
  
  onDelete() {

    this.dataListIds = [];
    for(let i = 0; i < this.dataList.length; i++) {
      if(this.dataList[i].selected == true) {
        this.dataListIds.push(this.dataList[i].id);
      }
    }
    console.log(this.dataListIds);
  
    if(this.dataListIds.length > 0) {
      const dialogRef = this.modal.alert()
      .size('sm')
      .showClose(true)
      .title('تأكيد الحذف')
      .body(`
          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
          `)
      .open();
  
        dialogRef.result
        .then( result =>
          this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
            (responce) => {
              console.log(responce);
              this.toastr.success('تم الحذف');
              this.spinner.show();
              this.dataList = [];
               //get list data
              this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null ,67).subscribe(
                (responce) => {
                  console.log(responce);
                  this.dataList = responce['units'];
                  this.count = responce['count'];
                  this.perPagePagenation = responce['per_page'];
                  this.spinner.hide();
                },
                (error) => {
                  console.log(error);
                  this.spinner.hide();
                }
              );
            },
            (error) => {
              console.log(error);
              this.spinner.hide();
              },
            )
        );
    } else {
      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
    }
  }
  onAdd() {
    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsBuildingInformation']);
  }
  
  onEdit(editId: number) {
    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsBuildingInformation/edit/' + editId]);
  }

}
