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

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.css']
})
export class InvoicesComponent implements OnInit {
  pageName: string = 'for_invoice';
  tableData: any[];
  bsModalRef: BsModalRef;
  alertConfirm: boolean;
  masterSelected: boolean;
  draftEnabled: boolean;
  checkedList: any;
  isSingleRowSelected = false;
  isDeleteEnabled = false;
  isMarkasPaidEnabled: boolean
  isEditEnabled: boolean
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  workflowStates: { state_id: number; flow_state: string; }[];
  invoiceForm: FormGroup;
  currentInvoiceState: number = 0;
  defaultInvoiceState: number = 0;
  constructor(private invoiceService: InvoicesService, private stateService: WorkflowStateService, private toastr: ToastrService, private fb: FormBuilder, private modalService: BsModalService) { }

  ngOnInit() {
    this.stateService.getAllWorkflowStateByPage(this.pageName).subscribe((result: { status: string, message: string, data }) => {
      this.workflowStates = result.data;
      this.workflowStates.push({ "state_id": this.workflowStates.length, "flow_state": "ALL STATES" });
      this.invoiceForm.controls['invoiceState'].patchValue(this.workflowStates.find((state) => state.flow_state == 'ALL STATES' ).state_id);
    });
    this.loadData(this.currentInvoiceState);
    this.invoiceForm = this.fb.group({
      invoiceState: [],
    });
  }
  /*
  @usage: called to load the table with data
  @purpose: called whenever there is state changed .
  */
  loadData(id) {
    this.invoiceService.getAllInvoicesByInvoiceStates(id).subscribe((result: { status: string, message: string, data }) => {
      this.tableData = result.data;
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].isSelected = false;
        if(this.tableData[i].invoice_workflow_state != null) {
        if (this.tableData[i].invoice_workflow_state.flow_state.toUpperCase() === "CONFIRMED" ||
          this.tableData[i].invoice_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].invoiceStates = "Overdue by " + days + " days";
          else this.tableData[i].invoiceStates = this.tableData[i].invoice_workflow_state.flow_state;
        } else {
          this.tableData[i].invoiceStates = this.tableData[i].invoice_workflow_state.flow_state;
        }
        this.tableData[i].amount_paid = this.tableData[i].total_amount - this.tableData[i].paid_amount;
        this.tableData[i].invoice_state = this.tableData[i].invoice_workflow_state.flow_state;
      }}
      this.masterSelected = false;
      this.isMarkasPaidEnabled = false;
      this.draftEnabled = false;
      this.isEditEnabled = false;
      this.isDeleteEnabled = false;
      this.dtTrigger.next();
    });
    this.dtOptions = {
      columnDefs: [{ type: 'date', 'targets': [1] }],
      order: [[1, 'desc']],
      scrollX: true
    }
  }
  /*
     @usage: called whenever there is statechange filter is called
     @purpose: based on selected state it will load the data.
   */
  invoiceStateChanged(stateID) {
    this.currentInvoiceState = stateID;
    var table = $('#invoiceGrid').DataTable();
    table.destroy();
    if (stateID === this.workflowStates.find((state) => state.flow_state === 'ALL STATES').state_id)
    this.currentInvoiceState = this.defaultInvoiceState;
   this.loadData(this.currentInvoiceState);
  }
  /*
  @usage: called whenever single checkbox is selected
  @purpose: update the selected checklist invoices
  */
  rowSelectedUnselected() {
    this.masterSelected = this.tableData.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 invoiceState = (this.checkedList[i].invoice_state).toUpperCase();
        if (invoiceState === 'DRAFT' || invoiceState === 'CONFIRMED')
          this.isDeleteEnabled = true;
        else {
          this.isDeleteEnabled = false;
          break;
        }
      }
    } else {
      this.isDeleteEnabled = false;
    }
    this.isSingleRowSelected = this.checkedList.length === 1 ? true : false;

    if (this.isSingleRowSelected) {
      this.enableOrDisableBtns(this.checkedList);
      this.isEditEnabled = true;
    }
    else {
      this.isMarkasPaidEnabled = false;
      this.draftEnabled = false;
      this.isEditEnabled = false;
    }

  }
  enableOrDisableBtns(checkedList) {
    if ((checkedList[0].invoice_state.toUpperCase() === 'CONFIRMED' && checkedList[0].amount_paid === 0) || checkedList[0].invoice_state.toUpperCase() === 'NOT PAID') { this.isMarkasPaidEnabled = true; }
    else { this.isMarkasPaidEnabled = false; }
    this.draftEnabled = (this.checkedList[0].invoice_state.toUpperCase() === 'DRAFT') ? true : false;
  }
  /*
  @usage: called when selectAll is checked
  @purpose: To select and unselect all checkbox.
  */
  checkUncheckAll() {
    this.masterSelected = !this.masterSelected;
    this.isEditEnabled = false;
    this.draftEnabled = false;
    this.isMarkasPaidEnabled = false;
    for (var i = 0; i < this.tableData.length; i++) {
      this.tableData[i].isSelected = this.masterSelected;
    }
    this.getCheckedItemList();
    if (this.checkedList.length > 0) {
      for (var i = 0; i < this.checkedList.length; i++) {
        var invoicestate = (this.checkedList[i].invoice_state).toUpperCase();
        if (invoicestate === 'DRAFT' || invoicestate === 'CONFIRMED')
          this.isDeleteEnabled = true;
        else {
          this.isDeleteEnabled = false;
          break;
        }
      }
    }
    else {
      this.isDeleteEnabled = false;
    }
  }
  /*
  @purpose: get all the selected invoices.
  */
  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 to confirmed .
*/
  convertDraftToConfirmedState() {
    this.bsModalRef = this.modalService.show(AlertModalComponent, {
      backdrop: 'static',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: {
        title: 'Alert',
        data: 'Are you sure want to convert invoice to confirmed state?',
        buttonText: 'Cancel',
        deleteBtn: 'Sure'
      }
    });
    this.bsModalRef.content.event.subscribe(res => {
      this.alertConfirm = res;
      if (this.alertConfirm) {
        const updateInvoice: any = {};
        updateInvoice.invoice_id = this.checkedList[0].invoice_id
        updateInvoice.state = "CONFIRMED";
        this.invoiceService.updateTheInvoice(updateInvoice).subscribe((result: { status: string, message: string, data }) => {
          if (result.status === 'success') {
            var table = $('#invoiceGrid').DataTable();
            this.toastr.success('Invoice updated successfully.');
            table.destroy();
            this.loadData(this.currentInvoiceState);

          }
        },
          (error) => {
            var table = $('#invoiceGrid').DataTable();
            this.toastr.error('Invoice Cannot be updated.');
            table.destroy();
            this.loadData(this.currentInvoiceState);

          },
        );
      }
    });
  }
  /*
@usage: to 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 Invoices?',
        buttonText: 'Cancel',
        deleteBtn: 'Delete'
      }
    });
    this.bsModalRef.content.event.subscribe(res => {
      this.alertConfirm = res;
      if (this.alertConfirm) {
        var invoices = [];
        for (var i = 0; i < this.checkedList.length; i++) { invoices.push(this.checkedList[i].invoice_id); }

        this.invoiceService.deleteInvoices(invoices.toString()).subscribe((result: { status: string, message: string, data }) => {
          if (result.status === 'success') {
            var table = $('#invoiceGrid').DataTable();
            table.destroy();
            this.toastr.success('Invoices Deleted successfully.');
            this.loadData(this.currentInvoiceState);
          }
        },
          (error) => {
            var table = $('#invoiceGrid').DataTable();
            table.destroy();
            this.toastr.error('Cannot Delete the Invoices.');
            this.loadData(this.currentInvoiceState);
          },

        );
      }
    });
  }

  /*
  @usage: to mark the selected record as paid
  */
  markAsPaid(){
    this.bsModalRef = this.modalService.show(AlertModalComponent, {
      backdrop: 'static',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: {
        title: 'Alert',
        data: 'Are you sure to mark this invoice as paid?',
        buttonText: 'Cancel',
        deleteBtn: 'Sure'
      }
    });
    this.bsModalRef.content.event.subscribe(res => {
      this.alertConfirm = res;
      if (this.alertConfirm) {
        let invoice = [];
        invoice.push(this.checkedList[0].invoice_id);
        this.invoiceService.updateInvoiceStateToPaid({invoices:invoice}).subscribe((result: { status: string, message: string, data }) => {
          if (result.status === 'success') {
            var table = $('#invoiceGrid').DataTable();
            this.toastr.success('Invoice updated successfully.');
            table.destroy();
            this.loadData(this.currentInvoiceState);

          }
        },
          (error) => {
            var table = $('#invoiceGrid').DataTable();
            this.toastr.error('Invoice Cannot be updated.');
            table.destroy();
            this.loadData(this.currentInvoiceState);

          },
        );
      }
    });
  }
}