import { Component, OnInit, AfterViewChecked, ViewChild, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import { UsageReports } from '../reports/reportdatamodel';
import { ReportService } from '../reports/report.service';
import { GlobalService } from '../../shared/global';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { DatePipe } from '@angular/common';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap';
import { Http, Response } from '@angular/http';
import { LoadingService } from '../../shared/loading.service';
import { PagerComponent } from '../../shared/pager/pager.component';
//import { LocalDataSource } from 'ng2-smart-table';
declare var $: any;

@Component({
    templateUrl: './usagereport.component.html'
})

export class UsageReport implements OnInit, AfterViewChecked {
  ngAfterViewChecked(): void {
    $('#fixed_hdr2 thead').css('width', $('#fixed_hdr2 tbody tr:eq(0)').width());
  }
    public lstUserUsageReport: any;
    public lstCountry: any;
    public lstState: any;
    UsageReportForm: FormGroup;
    UsageReports: UsageReports[];
    numberOfUsageReport: number;
    limit: number;
    page: number = 1;
    error;
    usagereport = new UsageReports();
    modalAlerts: string;
    divClass: string = '';
    topPos: string = '2000px';
    selectedRow: number = 0;
    datePipe: DatePipe = new DatePipe('en-US');
    bsValue1: Date = new Date();
    bsValue2: Date = new Date();
    selectedId: number = 0;
    modalRef: BsModalRef;
    date = new Date();
    previousdate = new Date();
    NoRecord: string;
    alerts: string;
    bsConfig: Partial<BsDatepickerConfig>;
    ExportingStart: boolean;
    buttonStatus: boolean;
    @ViewChild(PagerComponent) pagerComponent: PagerComponent;
    recordCount: number;
    pageNo: number;
    pageLength: number;
    DisableAccountNumberControl: boolean;
   //Smart Table Setting
    settings = {
      actions: { add: false, edit: false, delete: false },
      pager: {
        display: true,
        perPage: 50
      },
      attr: {
        class: 'table table-condensed table-bordered table-striped table-hover'
      },
      columns: {
        LoginId: {
          title: 'User Name',
          width: '140px',
        },
        FirstName: {
          title: 'First Name',
          width: '140px'
        },
        LastName: {
          title: 'Last Name',
          width: '140px'
        },
        AccountNumber: {
          title: 'Account Number',
          width: '140px'
        },       
        InstitutionName: {
          title: 'Institution Name',
          width: '140px'
        },
        CardNumber: {
          title: 'Credit Card Number',
          width: '140px'
        }
        ,
        UserType: {
          title: 'User Type',
          width: '140px'
        },
        Zip: {
          title: 'Zip',
          width: '140px'
        },
        LicenseState: {
          title: 'State(only U.S.)',
          width: '140px'
        }
        ,
        LicenseCountry: {
          title: 'Country',
          width: '140px'
        }
        ,
        TotalLogins: {
          title: 'Total Login',
          width: '140px'
        },
        LicenseCreationDate: {
          title: 'Original Entry Date',
          width: '140px'
        },
        LastLogin: {
          title: 'Last Login Date',
          width: '140px'
        }


      }
    };

    // Declare height and width variables
    scrHeight:any;
    scrWidth:any;
    @HostListener('window:resize', ['$event'])
    getScreenSize(event?) {

     var $ua = navigator.userAgent;
     if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
       this.scrHeight = window.innerHeight-520;
     }
     else
     {
       this.scrHeight = window.innerHeight-440;
     }
    }
    
    constructor(private router: Router, private reportservice: ReportService, private fb: FormBuilder,
      private modalService: BsModalService, public global: GlobalService,
      private _loadingService: LoadingService) {this.getScreenSize(); }

     
    ngOnInit(): void {
      this.ExportingStart = false;
      this.buttonStatus = false;
      this.bsConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });
        this.NoRecord = this.global.NoRecords;
        let usagereport = new UsageReports();
        this.previousdate.setDate(this.previousdate.getDate());
        this.UsageReportForm = this.fb.group({
            sFromDate: [this.previousdate],
            sToDate: [this.date],
            sAccountNumber: [''],
            sZip: [''],           
            iState: [0],
            iCountry: [0]           
        });
        if (this.global.UserTypeName == "Client Admin" || this.global.UserTypeName == "District Admin") {
          this.UsageReportForm.controls['sAccountNumber'].setValue(this.global.AccountNumber)
          this.DisableAccountNumberControl = true;
        }
        this.alerts = '';
        this.GetCountry();
        this.GetState();
        
        this.recordCount = 0;
        this.pageNo = 0;
        this.pageLength = 10;
        this.pagerComponent = new PagerComponent();
        this.GetUsageReport('1, ' + this.pageLength);
        $('#fixed_hdr2').fxdHdrCol({
          fixedCols: 0,
          width: "100%",
          height: this.scrHeight,
          colModal: [
            { width: 150, align: 'center' },
            { width: 150, align: 'center' },
            { width: 150, align: 'Center' },
            { width: 150, align: 'Center' },
            { width: 300, align: 'Center' },
            { width: 150, align: 'Center' },
            { width: 130, align: 'Center' },
            { width: 120, align: 'center' },
            { width: 150, align: 'Center' },
            { width: 140, align: 'center' },
            { width: 100, align: 'center' },
            { width: 150, align: 'center' },
            { width: 120, align: 'center' },
            // { width: 150, align: 'center' },
            // { width: 150, align: 'center' },
            // { width: 180, align: 'Center' },
            // { width: 400, align: 'Center' },
            // { width: 150, align: 'center' },
            // { width: 110, align: 'center' },
          ],
          sort: true
        });
        if(document.getElementById("fixed_table_rc") != null){
          document.getElementById("fixed_table_rc").remove();
          var testScript = document.createElement("script");
          testScript.setAttribute("id", "fixed_table_rc");
          testScript.setAttribute("src", "../assets/scripts/fixed_table_rc.js");
          testScript.setAttribute("type", "text/javascript");
          document.body.appendChild(testScript);
        }
        
    }

    GetUsageReport(evt: any) {      
      var tempArr = evt.split(',');
      this.pageNo = parseInt(tempArr[0]);
      var actulalength=this.pageLength;
      this.pageLength = parseInt(tempArr[1]);
      this.alerts = '';
      this.global.compareTwoDates(this.UsageReportForm.controls['sToDate'].value, this.UsageReportForm.controls['sFromDate'].value);
      if (this.global.ValidationMsg != '') {
        this.alerts = this.global.ValidationMsg
      }
      if (this.alerts == '') {
        this._loadingService.ShowLoading("global-loading");
        this.usagereport = this.UsageReportForm.value;
        var obj = this.usagereport;
        if (this.ExportingStart) {
          this.reportservice.GetUsageReport(obj,this.pageNo, this.pageLength).subscribe((UsageReports: UsageReports[]) => {
            //reset length after csvexport
            this.pageLength=actulalength;
            this.ExportService(UsageReports); }, error => this.error = <any>error);
        }
        else {
          this.reportservice.GetUsageReport(obj, this.pageNo, this.pageLength).subscribe((UsageReports: UsageReports[]) => { this.BindFormFields(UsageReports); }, error => this.error = <any>error);
        }
        
      }
    }
    SearchRecords() {
      this.ExportingStart = false;
      this.GetUsageReport('1, ' + this.pageLength);
    }
    GetCountry() {
        this.reportservice.GetCountry().subscribe(y => { this.lstCountry = y; }, error => this.error = <any>error);
    }

    GetState() {
        this.reportservice.GetState().subscribe(st => { this.lstState = st; }, error => this.error = <any>error);
    }

    BindFormFields(dataResult) {
      this.recordCount = dataResult.RecordCount;
      this.lstUserUsageReport = dataResult.UserUsage;
      this.numberOfUsageReport = this.lstUserUsageReport.length; this.limit = this.lstUserUsageReport.length;       
      if (this.lstUserUsageReport.length > 0) {
        this.NoRecord = '';
        this.buttonStatus = true;
        this._loadingService.HideLoading("global-loading");
      }
      if (this.lstUserUsageReport.length == 0) {
        this.buttonStatus = false;
        this.NoRecord = this.global.NoRecords;
        this._loadingService.HideLoading("global-loading");
      }
    }
    ExportEvent() {
      
      if (this.buttonStatus) {
        this.ExportingStart = true;
        this.GetUsageReport('1,' + this.recordCount);
        this.ExportingStart = false;
      }
    }
    ExportService(data: any) {
      for (let c = 0; c < this.global.RemoveColumns.length; c++) {
        for (let i = 0; i < data.UserUsage.length; i++) {
          delete data.UserUsage[i][this.global.RemoveColumns[c].toString()];
        }
      }
      this._loadingService.HideLoading("global-loading");
      this.global.ExportToCSV(data.UserUsage, "UsageReport-" + this.date.getDay() + "-" + this.date.getMonth() + "-" + this.date.getSeconds())      
    }
}