import { Component, OnInit, OnDestroy } from '@angular/core';
import { BillsService } from '../../../services/bills.service';
import { existingBills } from '../../../schemas/Bills/existingBills';
import { VendorService } from '../../../services/vendor.service';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { AlertModalComponent } from '../../common/alert-modal/alert-modal.component';

declare var $;
export class BillStates {
  state_id: Number;
  flow_state: String;
  constructor(state_id: Number, flow_state: String) {
    this.state_id = state_id;
    this.flow_state = flow_state;
  }
}
@Component({
  selector: 'app-bills',
  templateUrl: './bills.component.html',
  styleUrls: ['./bills.component.css'],
})

export class BillsComponent implements OnInit, OnDestroy {
  constructor(private billService: BillsService,  private toastr: ToastrService, private vendorService: VendorService, private fb: FormBuilder, private _router: Router, private modalService: BsModalService) {
  }
  bsModalRef: BsModalRef;
  alertConfirm: boolean;
  masterSelected: boolean;
  draftEnabled: boolean;
  checklist: any[];
  checkedList: any;
  selectAll: boolean;
  checkedBillId: any[] = [];
  allBillIds: any[] = [];
  unCheckedBillID: number[] = [];
  tableData: any[];
  billStates: any[] = [];
  columnNames: any[];
  isChecked = false;
  isCheckedrow = false;
  isDeleteEnabled = false;

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  workflowStates: { state_id: number; flow_state: string; }[];
  defaultstate: { state_id: number; flow_state: string; }[];
  billsForm: FormGroup;
  id: Number;
  state: String;
  currentBillState: number = 0;
  ngOnInit() {

    this.billsForm = this.fb.group({
      billState: ['ALL BILLS'],
    });
    this.loadData(this.currentBillState)
  }
    /*
      @usage: to load the data in table.
    */
  loadData(id) {
    this.billService.getAllExisitingBills(id).subscribe((bills: existingBills) => {
    
      this.billStates = [];
      this.tableData = bills.data.allBills;
      this.billStates.push(new BillStates(0, 'ALL BILLS'));
      for (let i = 0; i < bills.data.allStates.length; i++) {
        this.billStates.push(new BillStates(bills.data.allStates[i].state_id, bills.data.allStates[i].flow_state))
      }
      this.workflowStates = this.billStates;
      for (let i = 0; i < this.tableData.length; i++) {
        this.allBillIds.push(this.tableData[i].bill_id);
        this.tableData[i].vendor_id = this.tableData[i].vendor.display_name;
        this.tableData[i].isSelected = false;
        if (this.tableData[i].workflow_state.flow_state.toUpperCase() === "CONFIRMED" ||
          this.tableData[i].workflow_state.flow_state.toUpperCase() === "PARTIALLY PAID") {
          let currentDate = new Date();
          let dueDate = new Date(this.tableData[i].due_date);
          var days = Math.floor((Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
            - Date.UTC(dueDate.getFullYear(), dueDate.getMonth(), dueDate.getDate())) / (1000 * 60 * 60 * 24));
          if (days > 0)
            this.tableData[i].bill_states = "Overdue by " + days + " days";
          else this.tableData[i].bill_states = this.tableData[i].workflow_state.flow_state;
        } else {
          this.tableData[i].bill_states = this.tableData[i].workflow_state.flow_state;
        }
        this.tableData[i].amount_paid = (this.tableData[i].total_amount - this.tableData[i].amount_paid).toFixed(2);
        this.tableData[i].bill_state = this.tableData[i].workflow_state.flow_state;
      }
      this.checklist = this.tableData;
      this.getCheckedItemList();
      this.masterSelected = false;
      this.isDeleteEnabled = false;
      this.isCheckedrow = false;
      this.draftEnabled = false;
      this.dtTrigger.next();
    });
    this.dtOptions = {
      columnDefs: [{ type: 'date', 'targets': [1] }],
      order: [[1, 'desc']],

    }
   
   
  }
  /*
      @usage: to select all the rows.
      @purpose: based on select all delete button will work
    */

  checkUncheckAll() {
    this.isCheckedrow = false;
    this.draftEnabled = false;
    for (var i = 0; i < this.checklist.length; i++) {
      this.checklist[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
    if (this.checkedList.length > 0) {
      for (var i = 0; i < this.checkedList.length; i++) {
        var billstate = (this.checkedList[i].bill_state).toUpperCase();
        if (billstate === 'DRAFT' || billstate === 'CONFIRMED')
          this.isDeleteEnabled = true;
        else {
          this.isDeleteEnabled = false;
          break;
        }
      }
    }
    else {
      this.isDeleteEnabled = false;
    }
  }
/*
@usage: called when AllSelected
@purpose: select all unselect all checkbox.
*/
  isAllSelected() {

    this.masterSelected = this.checklist.every(function (item: any) {
      return item.isSelected == true;
    })
    this.getCheckedItemList();
    if (this.checkedList.length > 0) {
      for (var i = 0; i < this.checkedList.length; i++) {
        var billstate = (this.checkedList[i].bill_state).toUpperCase();
        if (billstate === 'DRAFT' || billstate === 'CONFIRMED')
          this.isDeleteEnabled = true;
        else {
          this.isDeleteEnabled = false;
          break;
        }
      }
    } else {
      this.isDeleteEnabled = false;
    }
    this.isCheckedrow = this.checkedList.length === 1 ? true : false;
    this.draftEnabled = (this.checkedList.length === 1 && (this.checkedList[0].bill_states).toUpperCase() === 'DRAFT')? true:false;
 
  }
  editRecord() {
    this._router.navigate(['/admin/bills/edit-bill', this.checkedList[0].bill_id])
  }

  getCheckedItemList() {
    this.checkedList = [];
    for (var i = 0; i < this.tableData.length; i++) {
      if (this.tableData[i].isSelected)
        this.checkedList.push(this.tableData[i]);
    }
  }
/*
@usage: called when update the state is required
@purpose: update the record  confirmed .
*/
  updateRecord() {
    const updateBill: any = {};
    updateBill.bill_id = this.checkedList[0].bill_id
  this.billService.updateTheBill(updateBill).subscribe((result: {status: string, message: string, data }) => 
  {
    if (result.status === 'success') {
      var table = $('#example').DataTable();
      table.destroy();
      this.loadData(this.currentBillState);
      this.toastr.success('Bill updated successfully.');
    }},
  (error) => {
    var table = $('#example').DataTable();
    table.destroy();
    this.loadData(this.currentBillState);
    this.toastr.error('Bill Cannot be updated.');
  },
);
  }
/*
@usage: to delete the selected records
*/
  deleteRecord() {
    this.bsModalRef = this.modalService.show(AlertModalComponent, {
      backdrop: 'static',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: {
        title: 'Alert',
        data: 'Do you want to delete the selected Bills?',
        buttonText:'Cancel',
        deleteBtn:'Delete'
      }
    });
    this.bsModalRef.content.event.subscribe(res => {
     this.alertConfirm = res;
      if(this.alertConfirm) {
    var bills = [];
    for(var i=0;i<this.checkedList.length;i++)
    {  bills.push(this.checkedList[i].bill_id);}
    this.billService.deleteTheBills(bills.toString()).subscribe((result: {status: string, message: string, data }) => 
    {
      if (result.status === 'success') {   
      var table = $('#example').DataTable();
      table.destroy();
      this.toastr.success('Bill Deleted successfully.');
      this.loadData(this.currentBillState); }},
      (error) => {
        var table = $('#example').DataTable();
        table.destroy();
        this.toastr.error('Cannot Delete the bills.');
        this.loadData(this.currentBillState);
      },
      
    ); }});
  }
  /*
 @usage: called when billState is Changed
 @purpose: fetch the new records .
 */
  billStateChanged(e) {
    this.currentBillState = e.state_id;
    var table = $('#example').DataTable();
    table.destroy();
    this.loadData(e.state_id);
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}