import { Component, OnInit, AfterViewInit, AfterViewChecked, Input, Output, EventEmitter, Pipe, PipeTransform, TemplateRef } 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 { ConfirmService } from '../../Shared/Confirm/confirm.service';
import { GlobalService } from '../../Shared/global';

declare var $:any;

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

export class ManageDiscountCode implements OnInit, AfterViewChecked {

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>;
NoRecord: string;
dateStartInvalid: boolean = false;
dateEndInvalid: boolean = false;
dateStartInvalid1: boolean = false;
dateEndInvalid1: boolean = false;

constructor(private manageDiscountCodeService: ManageDiscountCodeService, private router: Router, 
    private _confirmService: ConfirmService, private fb: FormBuilder, private global: GlobalService,
    private modalService: BsModalService) { }
  
    ngOnInit(): void {
        this.bsConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });
        this.divClass = 'col-sm-12';
        this.discountCode = new DiscountCode();
        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.]*')]],
            isActive: ['true']
        });
        this.SearchDiscountCodes();
    }

    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.alertmsg = '<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/>';
                }
            }
        }

    }

    public SearchDiscountCodes() {
      debugger;
      this.global.compareTwoDates(this.manageDiscountCodeFrm.controls['searchEndDate'].value, this.manageDiscountCodeFrm.controls['searchStartDate'].value);
      if (this.global.ValidationMsg != '') {
        this.Searchalerts = this.global.ValidationMsg
      }
      if (this.Searchalerts == '') {
        this.manageDiscountCodeService.GetDiscountCodes(
          {
            discountCode: this.manageDiscountCodeFrm.controls['searchDiscountCode'].value,
            startDate: this.datePipe.transform(this.manageDiscountCodeFrm.controls['searchStartDate'].value, 'MM/dd/yyyy'),
            endDate: this.datePipe.transform(this.manageDiscountCodeFrm.controls['searchEndDate'].value, 'MM/dd/yyyy'),
          })
          .subscribe(x => { this.BindFormFields(x) }, error => this.error = error);
      }
    }

    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.alerts == ''){
            var obj = this.insertUpdateDiscountCodeFrm.value;
            if(obj.discountId == 0){
                return this.manageDiscountCodeService.InsertDiscountCode(obj)
                .subscribe(
                n => (this.AfterInsertData(n, template)),
                error => this.error = <any>error);
            }
            else{
                return this.manageDiscountCodeService.UpdateDiscountCode(obj)
                .subscribe(
                n => (this.AfterUpdateData(n, template)),
                error => this.error = <any>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.modalAlerts = "<p>Discount code saved successfully</p>";
            this.modalRef = this.modalService.show(template);
        }
    }

    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);
        }
    }

    BindFormFields(data){
        this.discountCodes = data;
        if(this.discountCodes.length == 0){
            this.NoRecord = this.global.NoRecords;
        }
        this.discountCode = this.discountCodes[0];
        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]);
        }
    }

    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.SearchDiscountCodes();
    }
    
    SearchRecords(){
        this.selectedRow = -1;
        this.SearchDiscountCodes();
    }

    ngAfterViewChecked(){
        $('#tblDiscountCodes thead').css('width', $('#tblDiscountCodes tbody tr:eq(0)').width());
    }
}