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

@Component({
  selector: 'app-invoice-payments',
  templateUrl: './invoice-payments.component.html',
  styleUrls: ['./invoice-payments.component.css']
})
export class InvoicePaymentsComponent implements OnInit {
  tableData: any[];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  singleRowSelected: boolean
  selectedPaymentId: number
  bsModalRef: BsModalRef;
  alertConfirm: boolean;
  constructor(private invoiceService: InvoicesService,private modalService: BsModalService, private toastr: ToastrService,) { }

  ngOnInit(): void {
    this.loadData();
  }
/*
@purpose: load the data into the table
*/
  loadData() {
    this.invoiceService.getAllInvoicePayments().subscribe((result: { status: string, message: string, data }) => {
      this.tableData = result.data;
      this.dtTrigger.next();
    }
    
    )
    this.dtOptions = {
      columnDefs: [{ type: 'date', 'targets': [1] },{ width: '20%', "targets": 5 }],
      order: [[1, 'desc']],
      scrollX: true
    }
  }
  
  /*
 @usage: called when single checked box is checked unchecked
 @purpose: delete btn will be enabled or disabled based on selected row
 */

singleRowChecked(customerPayment) {
  this.singleRowSelected = customerPayment.isSelected;
  this.selectedPaymentId = customerPayment.customer_payment_id;
  for (let i = 0; i < this.tableData.length; i++) {
    if (this.tableData[i].customer_payment_id === customerPayment.customer_payment_id)
      this.tableData[i].isSelected = true;
    else this.tableData[i].isSelected = false;
  }
}
  /*
@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 Payment?',
      buttonText: 'Cancel',
      deleteBtn: 'Delete',
    }
  });
  let confirm: boolean;
  this.bsModalRef.content.event.subscribe(res => {
    this.alertConfirm = res;
    if (this.alertConfirm) {
        this.invoiceService.deleteTheInvoicePayment(this.selectedPaymentId).subscribe((result: { status: string, message: string, data }) => {
          if (result.status === 'success') {
            var table = $('#customerPaymentsGrid').DataTable();
            table.destroy();
            this.loadData();
            this.toastr.success('Selected payment is deleted');
          }
        },
          (error) => {
            var table = $('#customerPaymentsGrid').DataTable();
            table.destroy();
            this.loadData();
            this.toastr.error('Selected payment cannot be deleted.');
          },

        );
      
    }
  });
}

}