import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, Pipe, PipeTransform, TemplateRef, ViewChild,HostListener } from '@angular/core';
import { ManageDiscountCodeService } from './managediscountcode.service';
import { Router } from '@angular/router';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DiscountCode } from '../userentity/datamodel';
import { BsDatepickerModule, BsDatepickerConfig  } from 'ngx-bootstrap';
import { Http, Response } from '@angular/http';
import { DatePipe } from '@angular/common';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { PagerComponent } from '../../shared/pager/pager.component';
import { LoadingService } from '../../shared/loading.service';
import { GlobalService } from '../../shared/global';
import { ConfirmService } from '../../shared/confirm/confirm.service';
declare var $:any;

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

export class ManageDiscountCode implements OnInit {

Mode: string = 'Manage';
discountCode: DiscountCode;
discountCodes: Array<DiscountCode>;
manageDiscountCodeFrm: FormGroup;
insertUpdateDiscountCodeFrm: FormGroup;
error: any;
alerts: string;
alertmsg: string;
Searchalerts: string;
modalAlerts: string;
divClass: string = '';
topPos: string = '2000px';
selectedRow: number = -1;
datePipe: DatePipe = new DatePipe('en-US');
bsValue1: Date = new Date();
bsValue2: Date = new Date();
bsValue3: Date = new Date();
bsValue4: Date = new Date();
selectedId: number = 0;
modalRef: BsModalRef;
minDate = new Date(1110, 11, 1);
maxDate = new Date(9999, 11, 31);
bsConfig: Partial<BsDatepickerConfig>;
dateStartInvalid: boolean = false;
dateEndInvalid: boolean = false;
dateStartInvalid1: boolean = false;
dateEndInvalid1: boolean = false;
NoRecord: string;
@ViewChild(PagerComponent) pagerComponent: PagerComponent;
recordCount: number;
pageNo: number;
pageLength: number;
// Declare height and width variables
scrHeight:any;
scrWidth:any;
 SearchField:any={
	  discountCode:'',
	  startDate:'',
	  endDate:'',
	  sortColumn:'Id', 
	  sortOrder:'asc',
	  pageNo:1,
      pageLength:10,
      isGridBind:true	  
    }
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {

 var $ua = navigator.userAgent;
 if (($ua.match(/(iPod|iPhone|iPad|android)/i))) {
   this.scrHeight = window.innerHeight-415;
 }
 else
 {
   this.scrHeight = window.innerHeight-350;
 }
  if(this.scrHeight<=360) this.scrHeight=360;
	
   $(".ft_container").css("height",this.scrHeight);
}

constructor(private manageDiscountCodeService: ManageDiscountCodeService, private router: Router, 
    private fb: FormBuilder, private modalService: BsModalService, public global: GlobalService, 
    private _loadingService: LoadingService, private _confirmService: ConfirmService) {this.getScreenSize(); }
  
    ngOnInit(): void {
        this.bsConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });
        this.divClass = 'col-sm-12';
        this.discountCode = new DiscountCode();
        this.discountCode.Id = 0;
        this.alerts = '';
        this.alertmsg = '';
        this.Searchalerts = '';
        this.manageDiscountCodeFrm = this.fb.group({
            searchDiscountCode: [''],
            searchStartDate: [''],
            searchEndDate: [''],
            discountCodes: this.fb.array([])
        });
        this.insertUpdateDiscountCodeFrm = this.fb.group({
            discountId: [''],
            discountCode: [''],
            startDate: ['', Validators.required],
            endDate: ['', Validators.required],
            percentage: ['', [Validators.required, Validators.pattern('[0-9.]*'),Validators.min(0),Validators.max(100)]],
            isActive: ['true']
        });
        $('#fixed_hdr2').fxdHdrCol({
			fixedCols: 0,
			width: "100%",
			height: this.scrHeight,
			colModal: [
			{ width: 250, align: 'center' },
			{ width: 250, align: 'center' },
			{ width: 250, align: 'Center' },
			{ width: 250, align: 'Center' },
			{ width: 200, align: 'Center' },
			],
			sort: true
		});
        this.selectedRow = -1;
        this.selectedId = -1;
        this.pageNo = 1;
        this.pageLength = 10;
        this.NoRecord = this.global.NoRecords;
        this.recordCount = 0;
        this.pagerComponent = new PagerComponent();
		
		var thisObject=this;//class object
		$(".ft_rwrapper table thead tr th").on("click",function(event){  
				
		  if(event.currentTarget.id!=undefined && event.currentTarget.id!="" && event.currentTarget.id!=null)
		  {
			var fieldName=event.currentTarget.id;
			var sortType=''
			var isAscSort = $(".ft_rwrapper table thead tr #"+fieldName).hasClass('fx_sort_asc'); 
			$(".ft_rwrapper table thead tr th").removeClass('fx_sort_asc fx_sort_desc'); 
		  
			if (isAscSort) { 
			  $(".ft_rwrapper table thead tr #"+fieldName).addClass('fx_sort_desc').removeClass('fx_sort_asc'); 
			  sortType="desc";
			} else { 
			  $(".ft_rwrapper table thead tr #"+fieldName).addClass('fx_sort_asc').removeClass('fx_sort_desc'); 
			  sortType="asc";
			}
	  
			thisObject.SortTableRecords(fieldName,sortType);  

		  }
		 
		});
    }

    public SetClickedRow(i: number, item: any) {
        this.selectedRow = i;
        this.selectedId = item['Id'];   
        this.discountCode = item;
    }
   
    DateChange(dateValue: any){
        this.alerts = '';
        this.alertmsg = '';
        this.Searchalerts = '';
        if(this.manageDiscountCodeFrm.dirty) {
            if(dateValue._datepicker._elementRef.nativeElement.id == 'SearchStartDate'){
                if(dateValue._bsValue == null) {
                    if(dateValue._datepicker._elementRef.nativeElement.value != ''){
                        this.dateStartInvalid = true;    
                    }
                    else{
                        this.dateStartInvalid = false;    
                    }
                }
                else{
                    this.dateStartInvalid = false; 
                    this.manageDiscountCodeFrm.controls['searchStartDate'].setValue(dateValue._bsValue);
                }
            }

            if(dateValue._datepicker._elementRef.nativeElement.id == 'SearchEndDate'){
                if(dateValue._bsValue == null) {
                    if(dateValue._datepicker._elementRef.nativeElement.value != ''){
                        this.dateEndInvalid = true;    
                    }
                    else{
                        this.dateEndInvalid = false;    
                    }
                }
                else{
                    this.dateEndInvalid = false; 
                    this.manageDiscountCodeFrm.controls['searchEndDate'].setValue(dateValue._bsValue);
                }
            }

            if(!this.dateStartInvalid && !this.dateEndInvalid){
                if(Date.parse(this.manageDiscountCodeFrm.controls['searchStartDate'].value) > 
                Date.parse(this.manageDiscountCodeFrm.controls['searchEndDate'].value)){
                    this.Searchalerts = '<span>Search start date must be less than the search end date</span><br/>';
                }
            }
        }

        if(this.insertUpdateDiscountCodeFrm.dirty) {
            if(dateValue._datepicker._elementRef.nativeElement.id == 'startDate'){
                if(dateValue._bsValue == null) {
                    if(dateValue._datepicker._elementRef.nativeElement.value != ''){
                        this.insertUpdateDiscountCodeFrm.controls['startDate'].setValue(dateValue._datepicker._elementRef.nativeElement.value);
                        this.dateStartInvalid1 = true;    
                    }
                    else{
                        this.dateStartInvalid1 = false;    
                    }
                }
                else{
                    this.dateStartInvalid1 = false; 
                    this.insertUpdateDiscountCodeFrm.controls['startDate'].setValue(dateValue._bsValue);
                }
            }

            if(dateValue._datepicker._elementRef.nativeElement.id == 'endDate'){
                if(dateValue._bsValue == null) {
                    if(dateValue._datepicker._elementRef.nativeElement.value != ''){
                        this.insertUpdateDiscountCodeFrm.controls['endDate'].setValue(dateValue._datepicker._elementRef.nativeElement.value);
                        this.dateEndInvalid1 = true;    
                    }
                    else{
                        this.dateEndInvalid1 = false;    
                    }
                }
                else{
                    this.dateEndInvalid1 = false; 
                    this.insertUpdateDiscountCodeFrm.controls['endDate'].setValue(dateValue._bsValue);
                }
            }

            if(!this.dateStartInvalid1 && !this.dateEndInvalid1){
                if(Date.parse(this.insertUpdateDiscountCodeFrm.controls['startDate'].value) > 
                Date.parse(this.insertUpdateDiscountCodeFrm.controls['endDate'].value)){
                    this.alerts = '<span>Discount start date must be less than the discount end date</span><br/>';
                }
            }
        }

    }

    BindFormFields(data){
        this.recordCount = data.RecordCount;
        this.discountCodes = data.DiscountCodeList;
        this.manageDiscountCodeFrm.setControl('discountCodes', this.fb.array(this.discountCodes));
        if(this.selectedRow > -1){
            this.selectedRow = this.discountCodes.findIndex(C => C.Id == this.selectedId);
            this.SetClickedRow(this.selectedRow, this.discountCodes[this.selectedRow]);
        }
        if (this.discountCodes.length > 0) {
            this.NoRecord = '';
            this._loadingService.HideLoading("global-loading");
        }
        if (this.discountCodes.length == 0) {
            this.NoRecord = this.global.NoRecords;
            this._loadingService.HideLoading("global-loading");
        }
    }

   SortTableRecords(fieldName:string,sortType:string) {  
    this.selectedRow = -1;
	this.SearchField.sortColumn=fieldName;
	this.SearchField.sortOrder=sortType;
	
	this.GetDiscountCodeList();
   }
   
   GetDiscountCodeList() {
    this._loadingService.ShowLoading("global-loading");
	this.manageDiscountCodeService.GetDiscountCodes(this.SearchField)
	.subscribe(x => { this.BindFormFields(x) }, error => this.error = error);
    
   }

    public SearchDiscountCodes(evt: any) {

        var tempArr = evt.split(',');
        this.pageNo = parseInt(tempArr[0]);
        this.pageLength = parseInt(tempArr[1]);
		this.SearchField.pageNo=this.pageNo;
	    this.SearchField.pageLength=this.pageLength;
		
		this.GetDiscountCodeList();
        
    }

    SearchRecords() {
	this.selectedRow = -1;
	this.pageNo=1;
	this.SearchField.discountCode=this.manageDiscountCodeFrm.controls['searchDiscountCode'].value;
	this.SearchField.startDate=this.manageDiscountCodeFrm.controls['searchStartDate'].value;
	this.SearchField.endDate=this.manageDiscountCodeFrm.controls['searchEndDate'].value;
	
	this.SearchField.pageNo=this.pageNo;
	
	this.GetDiscountCodeList();
    }

    openModal(template: TemplateRef<any>) {
        this.modalRef = this.modalService.show(template);
    }

    public InsertUpdateDiscountCode(template: TemplateRef<any>) {
        this.alerts = '';
        if(parseInt(this.insertUpdateDiscountCodeFrm.value.percentage) > 100){
            this.alerts = '<span>Percentage must be between 0 to 100</span><br/>';
        }
        if(Date.parse(this.insertUpdateDiscountCodeFrm.controls['startDate'].value) > 
            Date.parse(this.insertUpdateDiscountCodeFrm.controls['endDate'].value)){
            this.alerts += '<span>Discount start date must be lower than discount end date</span>';
        }
		if (this.insertUpdateDiscountCodeFrm.valid && this.alerts == '') {
			this._loadingService.ShowLoading("global-loading");
        this.manageDiscountCodeService.GetDiscountCodes(
            {
                discountCode: this.insertUpdateDiscountCodeFrm.controls['discountCode'].value,
                startDate: '',
                endDate: '',
				sortColumn:'Id', 
	            sortOrder:'asc',
                pageNo: 1, 
                pageLength: 5,
                isGridBind:true
            })
            .subscribe(x => 
            { 
                    var obj = this.insertUpdateDiscountCodeFrm.value;
                    if(obj.discountId == 0){
                        if(x.RecordCount > 0){
                            this.alerts += '<span>Discount code already exists. Enter a different code.</span>';
							this._loadingService.HideLoading("global-loading");
                        }
                        if(this.alerts == ''){
                            return this.manageDiscountCodeService.InsertDiscountCode(obj)
                            .subscribe(
                            n => (this.AfterInsertData(n, template)),
                            error => this.error = <any>error);
                        }
                    }
                    else{
                        if(x.RecordCount > 0 && obj.discountId != x.DiscountCodeList[0].Id){
                            this.alerts += '<span>Discount code already exists. Enter a different code.</span>';
							this._loadingService.HideLoading("global-loading");
                        }
                        if(this.alerts == ''){
                            return this.manageDiscountCodeService.UpdateDiscountCode(obj)
                            .subscribe(
                            n => (this.AfterUpdateData(n, template)),
                            error => this.error = <any>error);
                        }
                    }
					
				
            }, error => this.error = error);
    
		}
	}

    AfterInsertData(data, template) {
        if (data.Status == "false") {
            //this.alerts = "<span>Discount code save unsuccessfull</span>";
            this._confirmService.activate("Discount code insert unsuccessfull", "alertMsg");
        } else {
            this._confirmService.activate("Discount code saved successfully.", "alertMsg");
            //this.modalAlerts = "<p>Discount code saved successfully</p>";
            //this.modalRef = this.modalService.show(template);
        }
		this._loadingService.HideLoading("global-loading");
    }

    AfterUpdateData(data, template) {
        if (data.Status == "false") {
            //this.alerts = "<span>Discount code update unsuccessfull</span>";
            this._confirmService.activate("Discount code update unsuccessfull.", "alertMsg");
        } else {
          this._confirmService.activate("Discount code updated successfully.", "alertMsg");
            //this.modalAlerts = "<p>Discount code updated successfully</p>";
            //this.modalRef = this.modalService.show(template);
        }
		this._loadingService.HideLoading("global-loading");
    }

    AddDiscountCode(){
        this.Mode = 'Add';
        this.topPos = '100px';
        this.divClass = 'col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3';
        this.insertUpdateDiscountCodeFrm.reset();
        this.alerts = '';
        this.insertUpdateDiscountCodeFrm.controls['discountId'].setValue(0);
        this.insertUpdateDiscountCodeFrm.controls['discountCode'].setValue('');
        this.insertUpdateDiscountCodeFrm.controls['startDate'].setValue('');
        this.insertUpdateDiscountCodeFrm.controls['endDate'].setValue('');
        this.insertUpdateDiscountCodeFrm.controls['percentage'].setValue('');
        this.insertUpdateDiscountCodeFrm.controls['isActive'].setValue('true');
    }

    EditDiscountCode(){
        this.Mode = 'Edit';
        this.topPos = '100px';
        this.divClass = 'col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3';
        this.alerts = '';
        this.insertUpdateDiscountCodeFrm.controls['discountId'].setValue(this.discountCode.Id);
        this.insertUpdateDiscountCodeFrm.controls['discountCode'].setValue(this.discountCode.DiscountCode);
        this.insertUpdateDiscountCodeFrm.controls['startDate'].setValue(this.datePipe.transform(this.discountCode.StartDate, 'MM/dd/yyyy'));
        this.insertUpdateDiscountCodeFrm.controls['endDate'].setValue(this.datePipe.transform(this.discountCode.EndDate, 'MM/dd/yyyy'));
        this.insertUpdateDiscountCodeFrm.controls['percentage'].setValue(this.discountCode.Percentage);
        if(this.discountCode.IsActive){
            this.insertUpdateDiscountCodeFrm.controls['isActive'].setValue('true');
        }
        else{
            this.insertUpdateDiscountCodeFrm.controls['isActive'].setValue('false');
        }
    }

    CancelAddEdit(){
        this.Mode = 'Manage';
        this.topPos = '2000px';
        this.divClass = 'col-sm-12';
        this.GetDiscountCodeList();;
    }
    
}