import { Component, OnInit, QueryList, ViewChild, ViewChildren, ChangeDetectorRef, AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Customer } from './customer';
import { TenantService } from './customer.service';
import { NgbdSortableHeader } from './sortable.directive';
import { AddCustomerComponent } from './add-customer/add-customer.component';
import { UtilityService } from 'src/app/shared/service/utility.service';
import { BaseService } from 'src/app/shared/service/base.service';
import { CustomerPropertiesComponent } from './customer-properties/customer-properties.component';
import confetti from 'canvas-confetti';


@Component({
  selector: 'app-customerlist',
  templateUrl: './customerlist.component.html',
  styleUrls: ['./customerlist.component.scss'],
  providers: [TenantService]
})
export class CustomerlistComponent implements OnInit, AfterViewInit {
  @ViewChild(AddCustomerComponent, { static: true }) addTenantComponent: AddCustomerComponent;
  @ViewChild(CustomerPropertiesComponent, { static: true })  customerPropertiesComponent: CustomerPropertiesComponent;

  tenants$: Observable<Customer[]>;
  total$: Observable<number>;

  loading = false;
  // confettiNum = 400;
  // coinNum = 30;
  // dollarNum = 50;
  // showAnimationFlag = false;

  // positions: { [key: string]: string } = {};

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor(
    public service: TenantService,
    private utilityService: UtilityService,
    public baseService: BaseService,
    private cdr: ChangeDetectorRef
  ) {
    this.tenants$ = service.device$;
    this.total$ = service.total$;
  }

  ngOnInit() {
    this.getAllCustomer();
    this.addTenantComponent.tenantAdded.subscribe(() => {
      this.getAllCustomer();
    });
    this.customerPropertiesComponent.tenantAdded.subscribe(() => {
      this.getAllCustomer();
    });
  }


  ngAfterViewInit() {
  }

  getAllCustomer() {
    this.baseService.getData('customer/allcustomer').subscribe(
      (data: any) => {
        if (data && data.data) {
          console.log(data);
          this.service.setTenants(data.data); // Use a method to set tenants in service
        }
      },
      (err) => {
        console.error('Error fetching tenants:', err);
      }
    );
  }

  openAddTenantModal() {
    if (this.addTenantComponent) {
      this.addTenantComponent.openModal();
    } else {
      console.error('AddTenantComponent is not initialized');
    }
  }

  openTenantPropertiesModal(data: Customer) {
    if (this.customerPropertiesComponent) {
      console.log(data);
      
      this.customerPropertiesComponent.tenant = data; 
      this.customerPropertiesComponent.openModal();
    } else {
      console.error('TenantPropertiesComponent is not initialized');
    }
  }

  DeleteRole(tenant: Customer) {
    this.baseService.deleteData(`customer/customer/${tenant.id}`).subscribe(
      (response: any) => {
        if (response) {
          console.log('Tenant deleted successfully');
          this.getAllCustomer();
        }
      },
      (err) => {
        console.error('Error deleting tenant:', err);
        // this.utilityService.showError('Failed to delete tenant.'); // Example of error feedback
      }
    );
  }

  hasPermission(permissions: string): boolean {
    return this.utilityService.hasPermission(permissions);
  }

  trackByIndex(index: number, obj: any): any {
    return index;
  }
}