import { Component, OnInit, ViewChild } from '@angular/core';
import { TransactionService } from '../../../services/transactions.service';
import { transactions } from '../../../schemas/transactions/transactions-defaults';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.css']
})
export class TransactionsComponent implements OnInit {
  tableData :  any[];
  columnNames: any[];
  @ViewChild('multiSelect') multiSelect;
  @ViewChild(DataTableDirective)
  private datatableElement: DataTableDirective;
  public form: FormGroup;
  multiSelectFilterColumnData: any[];
  item:any[];
  dropdownList = [];
  currentDate: string;
  dropdownSettings:IDropdownSettings={};
  customColumnNames: any[];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();

  constructor(private transactionService: TransactionService,private fb:FormBuilder) {}
  
  ngOnInit(): void {
    this.form = this.fb.group({
      transactionType: new FormControl(),
      startDate: [new Date(), Validators.required],
    });
    this.currentDate = this.getCurrentDate();
    this.loadData(this.currentDate);
    this.dropdownSettings = {
      singleSelection: false,
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      maxHeight: 197,
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
    this.form.get('startDate').valueChanges.subscribe(value => this.changeDate());
  }
  
   /*
    @usage: called when a table is loaded
    @param date : date of the transaction to be fetched.
    @purpose: loads the table with date selected bydefault current date will be selected.
  */
  loadData(date) {
    this.transactionService.getTransactionsByDate(date).subscribe((data: transactions) => {
      this.tableData = data.data.transactions;
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].account_name = this.tableData[i].account_name.account_name;
        if (this.tableData[i].credit)
          this.tableData[i].totalAmt = this.tableData[i].credit + 'CR'
        else if (this.tableData[i].debit)
          this.tableData[i].totalAmt = this.tableData[i].debit + 'DR'
      }
      this.multiSelectFilterColumnData = data.data.transaction_type.map(x => x.transaction_id);
      this.dropdownList = this.multiSelectFilterColumnData;
      this.dtTrigger.next();
    });
  }
  /*
   @usage: called whenever the new date is selected
   @purpose: loads the table with date selected.
 */
  changeDate() {
    var datechoosed = this.form.get('startDate').value;
    if (datechoosed != null) {
      var date = new Date(datechoosed),
      month = ("0" + (date.getMonth() + 1)).slice(-2),
      day = ("0" + date.getDate()).slice(-2);
      var searchDate = [date.getFullYear(), month, day].join("-");
      var table = $('#example').DataTable();
      this.form.get('transactionType').setValue('');
      table.destroy();
      this.loadData(searchDate);
    }
  }
  /*
  @usage: to get the current date
  */
  getCurrentDate() {
    var currentDate = new Date();
    var dd = String(currentDate.getDate()).padStart(2, '0');
    var mm = String(currentDate.getMonth() + 1).padStart(2, '0');
    var yyyy = currentDate.getFullYear();
    var date = yyyy + '-' + mm + '-' + dd;
    return date;
  }

   /*
    @usage: to filter the table based on transaction type
    */
 
  changeMultiSelect(e) {
    var table = $('#example').DataTable();
      var selectedTransactionTypes = (e.toString()).split(',');
      //hardcoded values need to be removed in next
      table.column(3).search(selectedTransactionTypes.join('|'), true, false, true).draw();

  }
 
  }