import {
  Component,
  OnInit,
  ViewEncapsulation,
  AfterViewInit
} from '@angular/core';
import { Router } from '@angular/router';
import { Helpers } from '../../../../../helpers';
import { ScriptLoaderService } from '../../../../../_services/script-loader.service';
import Web3 from 'web3';
import { DetailsService } from '../../details.service';
import { GlobalsComponent } from '../../globals/globals.component';

declare var $: any;

@Component({
  selector: '.m-grid__item.m-grid__item--fluid.m-wrapper',
  templateUrl: './gbt-balance.component.html',
  styleUrls: ['./gbt-balance.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class GbtBalanceComponent implements OnInit, AfterViewInit {
  public web3;
  public gbtBalance1 = [];
  public ledgerDetails1 = [];
  public ledgerDetails2 = [];
  public masterAddresses = [];
  public userObj;
  public dAppNameArray = [];
  public dAppMasterMapp = {};
  public noRecord = false;
  public metamaskLogin = true;
  public memberAddress;
  constructor(
    private _script: ScriptLoaderService,
    private detailService: DetailsService,
    private globals: GlobalsComponent
  ) {}

  ngOnInit() {
    this.detailService.setTitle('GBT Ledger');
    $('#filters').hide();
    let user = localStorage.getItem('currentUser');
    this.userObj = JSON.parse(user);

    this.web3 = new Web3(window['web3'].currentProvider);
    this.web3.eth.defaultAccount = this.web3.eth.coinbase;
    if (this.web3.eth.accounts[0] == undefined) {
      this.metamaskLogin = false;
      this.memberAddress = '0x0000000000000000000000000000000000000000';
    } else {
      this.memberAddress = this.web3.eth.accounts[0];
    }
    import('../../globals/globals.component').then(module => {
      module.generator();
    });
    var timeoutVar = setInterval(
      function() {
        if (GlobalsComponent.gbmaster) {
          this.getLedgerData();
          clearInterval(timeoutVar);
        }
      }.bind(this),
      500
    );
  }

  getLedgerData() {
    GlobalsComponent.gbmaster.getGBTledgerDetails(
      this.memberAddress,
      function(error, result) {
        if (!error) {
          var gbtDetails = {};
          for (let i = 0; i < result.length; i++) {
            var balance;
            var credit = 0;
            var debit = 0;
            var type;
            if (result[i].args.from == this.memberAddress) {
              debit = result[i].args.value.toNumber();
              type = 'd';
            } else {
              credit = result[i].args.value.toNumber();
              type = 'c';
            }
            var blockNumber = result[i].blockNumber;
            // var description = this.hex_to_ascii(result[i].args.description);
            gbtDetails[result[i].blockHash] = {
              date: 0,
              blockNumber: blockNumber,
              debit: Math.round((debit / 1e18) * 100) / 100,
              credit: Math.round((credit / 1e18) * 100) / 100,
              type: type
            };
            this.web3.eth.getBlock(
              blockNumber,
              function(error, resBlock) {
                var timestamp;
                var d = new Date(resBlock.timestamp * 1000);
                var options = {
                  year: 'numeric',
                  month: 'short',
                  day: 'numeric'
                };
                timestamp = d.toLocaleDateString('en', options);
                gbtDetails[resBlock.hash].date = timestamp;
                this.ledgerDetails1.push(gbtDetails[resBlock.hash]);
                if (this.ledgerDetails1.length == result.length) {
                  this.ledgerDetails1.sort(this.predicateBy('blockNumber'));
                  this.ledgerDetails();
                }
              }.bind(this)
            );
          }
          if (result.length == 0) {
            this.demo();
          }
        }
      }.bind(this)
    );
  }

  ledgerDetails() {
    if (this.ledgerDetails1.length == 0) {
      this.demo();
    }
    for (let i = 0; i < this.ledgerDetails1.length; i++) {
      var balance;
      if (this.gbtBalance1.length < 1) {
        balance = this.ledgerDetails1[i].credit - this.ledgerDetails1[i].debit;
      } else {
        balance =
          this.gbtBalance1[this.gbtBalance1.length - 1].balance +
          (this.ledgerDetails1[i].credit - this.ledgerDetails1[i].debit);
      }
      var gbtDetails = {
        id: i + 1,
        type: this.ledgerDetails1[i].type,
        date: this.ledgerDetails1[i].date,
        debit: this.ledgerDetails1[i].debit,
        credit: this.ledgerDetails1[i].credit,
        balance: balance
      };
      this.gbtBalance1.push(gbtDetails);
      if (this.gbtBalance1.length == this.ledgerDetails1.length) {
        this.demo();
      }
    }
  }

  //method for sorting the object
  predicateBy(prop) {
    return function(a, b) {
      if (a[prop] > b[prop]) {
        return 1;
      } else if (a[prop] < b[prop]) {
        return -1;
      }
      return 0;
    };
  }
  hex_to_ascii(str1) {
    var hex = str1.toString();
    var str = '';
    for (var n = 0; n < hex.length; n += 2) {
      str += String.fromCharCode(parseInt(hex.substr(n, 2), 16));
    }
    str1 = '';
    for (var i = 0; i < str.length; i++) {
      if (str.charCodeAt(i) != 0) {
        str1 += str[i];
      }
    }
    return str1;
  }

  ngAfterViewInit() {}

  demo() {
    if (this.gbtBalance1.length > 0) {
      $('#filters').show();
      $('#loader').hide();
      var datatable = $('.m_datatable').mDatatable({
        // datasource definition
        data: {
          type: 'local',
          source: this.gbtBalance1,
          pageSize: 10,
          saveState: {
            cookie: true,
            webstorage: true
          }
        },

        // layout definition
        layout: {
          theme: 'default', // datatable theme
          class: '', // custom wrapper class
          // height: 550, // datatable's body's fixed height
          scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
          footer: false // display/hide footer
        },

        // column sorting
        sortable: false,

        pagination: true,

        search: {
          input: $('#generalSearch')
        },

        // columns definition
        columns: [
          {
            field: 'id',
            title: 'S No.',
            width: 40,
            textAlign: 'center',
            sortable: false
          },
          {
            field: 'date',
            title: 'Date',
            width: 100,
            sortable: false
          },
          // {
          //     field: "description",
          //     title: "Description",
          //     width: 400,
          //     sortable: false
          // },
          {
            field: 'debit',
            title: 'Debit',
            width: 50,
            textAlign: 'center',
            sortable: false
          },
          {
            field: 'credit',
            title: 'Credit',
            width: 50,
            textAlign: 'center',
            sortable: false
          },
          {
            field: 'balance',
            title: 'Balance',
            width: 60,
            textAlign: 'center',
            sortable: false
          }
        ]
      });

      var query = datatable.getDataSourceQuery();
      var type = {
        d: { title: 'Debit' },
        c: { title: 'Credit' }
      };

      $('#m_form_status')
        .on('change', function() {
          datatable.search($(this).val(), 'type');
        })
        .val(typeof query.type !== 'undefined' ? query.type : '');

      $('#m_form_type')
        .on('change', function() {
          datatable.search($(this).val(), 'Type');
        })
        .val(typeof query.Type !== 'undefined' ? query.Type : '');

      $('#m_form_status, #m_form_type').selectpicker();
    } else {
      $('#loader').hide();
      this.noRecord = true;
    }
  }
}