import { Component } from '@angular/core';
import { BuildingService } from '../../service/monitoring-api.service';
import { DeviceService } from '../../service/device.service';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-control-device-seemore',
  templateUrl: './control-device-seemore.component.html',
  styleUrls: ['./control-device-seemore.component.css']
})
export class ControlDeviceSeemoreComponent {
  data: any;
  filteredRows: any[];
  searchTerm: string = "";
  buildingSelected: any;
  statusSelected: any;
  categorySelected: any;
  dataMasterCategori: any;
  dataBuildingList: any;
  dataMasterStatus: any;
  spinnerFilterActive = false;
  switchState: boolean;
  paramsId: any;

  public breadcrumb: any;
  spinnerActive: boolean = false;

  constructor(
    private deviceService: DeviceService,
    private monitoringApiService: BuildingService,
    private route: ActivatedRoute,
    private toastr: ToastrService,
  ) {}

  ngOnInit() {
    this.route.params.subscribe((params) => {
      const buildingId = params["id"];
      this.paramsId = buildingId ? buildingId: 0;
      this.buildingSelected = parseInt(this.paramsId);
      
    });
    this.breadcrumb = {
      mainlabel: "Control Device",
      linkBack: `/monitoring/view-new-building/${this.buildingSelected}`,
      isLinkBack: true,
      links: [
        {
          name: "Dashboard",
          isLink: false,
          link: "",
        },
        {
          name: "Energy Monitoring",
          isLink: false,
          link: "",
        },
        {
          name: "Control Device",
          isLink: false,
          link: "",
        },
      ],
    };
    
    this.fetchData(
      this.buildingSelected,
      this.categorySelected,
      this.statusSelected
    );
    this.dataListMaster();
    this.dataListBuilding();
  }

  fetchData(buildingSelected, categorySelected, statusSelected) {
    this.deviceService
      .getDeviceData(buildingSelected, categorySelected, statusSelected)
      .subscribe((res) => {
        this.data = res;
        this.filteredRows = this.data.results.data;
      });
  }

  dataListMaster() {
    this.monitoringApiService.getMasterListData().subscribe((data) => {
      const dataCategory = data.data.find(
        (item) => item.name === "master_category"
      ).headerDetailParam;
      const dataStatus = data.data.find(
        (item) => item.name === "master_status"
      ).headerDetailParam;
      this.dataMasterCategori = dataCategory.filter(
        (item) => item.status === "2"
      );
      this.dataMasterStatus = dataStatus.filter((item) => item.status === "2");
    });
  }

  dataListBuilding() {
    this.monitoringApiService.getBuildingList().subscribe((data) => {
      this.dataBuildingList = data.data.filter((item) => item.statusId === 2);
    });
  }

  doFilter() {
    if (!this.buildingSelected) {
      this.toastr.error("Warning", "Filter Building tidak boleh kosong.", {
        timeOut: 5000,
        closeButton: true,
      });
    } else {
      this.spinnerFilterActive = true;
      this.fetchData(
        this.buildingSelected,
        this.categorySelected,
        this.statusSelected
      );
      setTimeout(() => {
        this.spinnerFilterActive = false;
      }, 3000);
    }
    
  }

  doFilterCancel(){
    this.buildingSelected = parseInt(this.paramsId);
    this.categorySelected = undefined;
    this.statusSelected = undefined;
    this.fetchData(this.buildingSelected, 0, 0);
  }

  filterRows() {
    if (!this.searchTerm) {
      this.filteredRows = [...this.data.results.data];
    } else {
      this.filteredRows = this.data.results.data.filter((row) =>
        this.rowContainsSearchTerm(row)
      );
    }
  }

  rowContainsSearchTerm(row: any): boolean {
    const searchTermLC = this.searchTerm.toLowerCase();
    return Object.values(row).some(
      (value) =>
        value !== null && value.toString().toLowerCase().includes(searchTermLC)
    );
  }

  switchChanged(ev, data) {
    const requestData = {
      device_id: data.device_id,
      switch: data.mapping[0].switch,
      value: ev,
      command_type: "on_off",
    };
    this.deviceService.deviceSwitch(requestData).subscribe((res) => {
      console.log(res);
    });
  }
}
