import { Component, OnInit, ElementRef } from '@angular/core';
import { VendorService } from '../../../services/vendor.service';
import { Subject } from 'rxjs';
import { Router } from '@angular/router';
import { AlertModalComponent } from '../../common/alert-modal/alert-modal.component';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-vendors',
  templateUrl: './vendors.component.html',
  styleUrls: ['./vendors.component.css']
})
export class VendorsComponent implements OnInit {
  tableData: any[];
  totalBillAmount: number = 0;
  totalamountPaid: number = 0;
  totalVendorAmount: number = 0;
  totalCreditUsed: number = 0;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  singleRowSelected: boolean
  billsOfVendors: string[] = [];
  selectedVendorId: string
  bsModalRef: BsModalRef;
  alertConfirm: boolean;
  vendorCreditTotalamount: number
  creditUsed: number
  constructor(private vendorService: VendorService, private elementRef: ElementRef, private modalService: BsModalService, private toastr: ToastrService, private router: Router) { }


  ngOnInit(): void {
    this.loadData();

  }
  /*
@usage: called when data is loaded
@purpose: loads the data into table with initially 100 records
*/
  loadData() {
    this.vendorService.getAllVendorsBillandCreditDetails().
      subscribe((result: { status: string, message: string, data }) => {
        this.tableData = result.data;
        for (var i = 0; i < this.tableData.length; i++) {
          this.vendorCreditTotalamount = (this.tableData[i].vendorCreditTotalamount);
          this.creditUsed = (this.tableData[i].creditUsed);
          this.tableData[i].credits = Math.floor(this.vendorCreditTotalamount - this.creditUsed);
          this.tableData[i].amountPayable = Math.floor((this.tableData[i].totalamount) - (this.tableData[i].amountPaid));
          this.tableData[i].isSelected = false;
        }
        this.dtTrigger.next();
      })
    this.dtOptions = {
      columnDefs: [{ width: '20%', "targets": 1 }],
    }
  }

  /*
 @usage: called when single checked box is checked unchecked
 @purpose: delete btn will be enabled or disabled based on selected row
 */

  singleRowChecked(vendor) {
    this.singleRowSelected = vendor.isSelected;
    this.selectedVendorId = vendor.vendor_id;
    for (let i = 0; i < this.tableData.length; i++) {
      if (this.tableData[i].display_name === vendor.display_name)
        this.tableData[i].isSelected = true;
      else this.tableData[i].isSelected = false;
    }
  }
  /*
@usage: called whennew btn is clicked
@purpose: route to new vendor 
*/
  createVendor() {
    this.router.navigate(['admin/vendors/new-vendor']);
  }
  /*
@usage: called when delete is required
@purpose: delete the selected records
*/
  onDelete() {
    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 vendor?',
        buttonText: 'Cancel',
        deleteBtn: 'Delete',
      }
    });
    let confirm: boolean;
    this.bsModalRef.content.event.subscribe(res => {
      this.alertConfirm = res;
      if (this.alertConfirm) {
        if (this.billsOfVendors.includes(this.selectedVendorId.toString())) {
          this.bsModalRef = this.modalService.show(AlertModalComponent, {
            backdrop: 'static',
            keyboard: false,
            animated: true,
            ignoreBackdropClick: true,
            initialState: {
              data: 'This Vendor cannot be deleted as it is associated either with some documents or transactions?',
              infoPopup: true
            }
          });
        }
        else {
          this.vendorService.deleteVendor(this.selectedVendorId).subscribe((result: { status: string, message: string, data }) => {
            if (result.status === 'success') {
              var table = $('#vendorsGrid').DataTable();
              table.destroy();
              this.loadData();
              this.toastr.success('Selected vendor is deleted');
            }
          },
            (error) => {
              var table = $('#vendorsGrid').DataTable();
              table.destroy();
              this.loadData();
              this.toastr.error('Selected Vendor cannot be deleted.');
            },

          );

        }
      }
    });
  }
}