import { Component, Injector, ViewChild, OnInit, ElementRef, Output, EventEmitter } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { AppComponentBase } from '@shared/common/app-component-base';
import { FormControl, FormGroup } from '@angular/forms';
import * as moment from 'moment-timezone';
import { BusinessHoursCodeDto, BusinessHoursEditDto, BusinessHoursServiceProxy, CreateOrEditBusinessHoursInput, DAYOFTHEWEEKCODEDTO, GetBusinessHoursDto } from '@shared/service-proxies/service-proxies';
import { catchError, finalize } from 'rxjs/operators';
import * as _ from 'lodash';
import { DatePipe } from '@angular/common';
declare var $: any;
@Component({
    selector: 'editBusinessHoursModal',
    templateUrl: './edit-business-hours.component.html',
    styleUrls: ['./customer-portal.component.css']
})
export class EditBusinessHoursModal extends AppComponentBase {

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    @ViewChild('modal', { static: false }) modal: ModalDirective;
    @ViewChild('nameInput', { static: false }) nameInput: ElementRef;

    active: boolean = false;
    saving: boolean = false;

    ChooseBusinessHours: any;
    // BusinessHoursDay: any = 'Monday';
    hours: GetBusinessHoursDto[];
    businessHourCode: BusinessHoursCodeDto[];
    businessDayOfTheWeekCode: DAYOFTHEWEEKCODEDTO[];
    today = new Date();
    arrayDayHolder = [];
    arrayDateHolder = [];
    arrayHolder = [];
    initialValues = {};
    timeId:any;
    hourInput = new CreateOrEditBusinessHoursInput();
    businessInputList: Array<BusinessHoursEditDto> = [];
    businessInput = new BusinessHoursEditDto ();
    contactId : number;
    dayList: Array<any> = [
        {id: 1, name: 'Sunday'},
        {id: 2, name: 'Monday'},
        {id: 3, name: 'Tuesday'},
        {id: 4, name: 'Wednesday'},
        {id: 5, name: 'Thursday'},
        {id: 6, name: 'Friday'},
        {id: 7, name: 'Saturday'}
    ];
    businessCode = [];
    dayListSel: Array<any> = [];
    isClosed: boolean = false;
    openingTime: any
    closingTime:any;
    mySelectedDates = [];
    haveDuplicates: boolean = false;
    initialBusinessHours: any;
    businessCount:number = 0;
    constructor(
        injector: Injector,
        private _businessHourRepository: BusinessHoursServiceProxy,
        public datepipe: DatePipe
    ) {
        super(injector);
    }

    ngOnInit() {
        this.hourInput.createOrEditBusinessHours = [];
        let that = this;
    }

    show(hours: any, contactId: number): void {
        this.timeId = localStorage.getItem('timeZoneId');
        this.contactId = contactId;
        this.today = new Date();
        this.getBusinessHours();
        let array = {};
        array = {
            'id': undefined,
            'code': _.isEmpty(this.dayList) ? "SPECIFICDATE" : "DAYOFTHEWEEK",
            'date': moment.tz(this.today, this.timeId).toDate(),
            'day': _.isEmpty(this.dayList) ? "" : this.dayList[0].name,
            'isClosed': false,
            'closing': moment(this.today).toDate(),
            'opening': moment(this.today).toDate(),
        }
        this.getBusinessHourCode();
        this.initialValues = array;
        this.dayListSel= [];
        this.hours = hours;
        this.active = true;
        this.modal.show();
    }

    onShown(): void {
        var that = this
        $('.kt-select2').select2();
    }

    getInitialValue(): void{

    }
    addHour(){
        let arrayDay = {}, arrayDate = {};
        let array = {};
        this.haveDuplicates = false;
        array = {
            'id': undefined,
            'code': this.initialValues['code'],
            'date': this.initialValues['date'],
            'dateString': this.initialValues['code']=='SPECIFICDATE' ? this.datepipe.transform(this.initialValues['date'], 'MMMM dd, yyyy') : "",
            'day': $('#DateOrDay').val(),
            'isClosed': (this.initialValues['isClosed'] =="true"),
            // 'closing': new Date(this.initialValues['closing']).toLocaleTimeString('en-US', { hour12: true, 
            //     hour: "numeric", 
            //     minute: "numeric",
            //     second: "numeric"
            //     }) as any,
            // 'opening': new Date(this.initialValues['opening']).toLocaleTimeString('en-US', { hour12: true, 
            //     hour: "numeric", 
            //     minute: "numeric",
            //     second: "numeric"
            //     }) as any,
            'openingTimeString': new Date(this.initialValues['opening']).toLocaleTimeString('en-US', { hour12: true, 
                hour: "numeric", 
                minute: "numeric",
                // second: "numeric"
                }) as any,
            'closingTimeString': new Date(this.initialValues['closing']).toLocaleTimeString('en-US', { hour12: true, 
                hour: "numeric", 
                minute: "numeric",
                // second: "numeric"
                }) as any
        }
        if(this.initialValues['code']=='SPECIFICDATE'){
            for(var data in this.arrayHolder){
                if(this.arrayHolder[data]['dateString'] == this.datepipe.transform(this.initialValues['date'], 'MMMM dd, yyyy')){
                    this.haveDuplicates = true;
                }
            }
            
        }
        if(!this.haveDuplicates){
            this.mySelectedDates.push(this.initialValues['date']);
            this.arrayHolder.push(array);
            var arrayHolder = [];
            var hours = this.arrayHolder;
            this.arrayDayHolder = [];
            this.arrayDateHolder = [];
            var dayList = [
                {id: 1, name: 'Sunday'},
                {id: 2, name: 'Monday'},
                {id: 3, name: 'Tuesday'},
                {id: 4, name: 'Wednesday'},
                {id: 5, name: 'Thursday'},
                {id: 6, name: 'Friday'},
                {id: 7, name: 'Saturday'}
            ];
            var a = hours.filter(o => o.code =='DAYOFTHEWEEK');
            for(var data in a){
                const index: number = this.dayList.findIndex(x => x.name == a[data].day);
                    if (index !== -1) {
                        this.dayList.splice(index, 1);
                    } 
            }
            if(_.isEmpty(this.dayList)){
                var code = this.businessCode.find(x => x.code == "DAYOFTHEWEEK");
                if(!_.isEmpty(code)){
                    this.businessCode.forEach((value,index)=>{
                        if(value.id==code.id) this.businessCode.splice(index,1);
                    });
                }
                this.initialValues['code'] = 'SPECIFICDATE';
            }
            for (var data in hours) {
                let closing = this.today.toDateString() + ' ' + hours[data].closingTimeString;
                let opening = this.today.toDateString() + ' ' + hours[data].openingTimeString;
                if (hours[data].code == "DAYOFTHEWEEK") {
                    for (var data1 in dayList) {
                        if (hours[data].day == dayList[data1].name) {
                            arrayDay = {
                                'id': hours[data].id,
                                'code': hours[data].code,
                                'date': moment.tz(hours[data].date, this.timeId).toDate(),
                                'day': hours[data].day,
                                'isClosed': hours[data].isClosed,
                                'closing': moment(closing).toDate(),
                                'opening': moment(opening).toDate(),
                                'sort': dayList[data1].id,
                                'dateString': hours[data].dateString,
                                'openingTimeString': hours[data].openingTimeString,
                                'closingTimeString': hours[data].closingTimeString,
                                'closingTimeS': hours[data].closingTimeS,
                                'openingTimeS': hours[data].openingTimeS
                            }
                            this.arrayDayHolder.push(arrayDay);
                        }
                    }
                } else {
                    arrayDate = {
                        'id': hours[data].id,
                        'code': hours[data].code,
                        'date': moment.tz(hours[data].date, this.timeId).toDate(),
                        'day': hours[data].day,
                        'isClosed': hours[data].isClosed,
                        'closing': moment(closing).toDate(),
                        'opening': moment(opening).toDate(),
                        'dateString': hours[data].dateString,
                        'openingTimeString': hours[data].openingTimeString,
                        'closingTimeString': hours[data].closingTimeString,
                        'closingTimeS': hours[data].closingTimeS,
                        'openingTimeS': hours[data].openingTimeS
                    }
                    this.arrayDateHolder.push(arrayDate);
                }
            }
            this.arrayDayHolder = this.arrayDayHolder == [] ? [] : _.sortBy(this.arrayDayHolder, 'sort');
            this.arrayDateHolder = this.arrayDateHolder == [] ? [] : this.arrayDateHolder.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
            if (this.arrayDayHolder != []) {
                for (var x in this.arrayDayHolder) {
                    arrayHolder.push(this.arrayDayHolder[x]);
                }
            }
            if (this.arrayDateHolder != []) {
                for (var x in this.arrayDateHolder) {
                    arrayHolder.push(this.arrayDateHolder[x]);
                }
            }
            this.arrayHolder = arrayHolder;
        }else{
            this.notify.error(this.l('SelectedDateIsAlreadyExist'));
        }
    }
    deleteHour(id: number, datas: any){
        this.arrayHolder.splice(id, 1);
        this.dayList = [
            {id: 1, name: 'Sunday'},
            {id: 2, name: 'Monday'},
            {id: 3, name: 'Tuesday'},
            {id: 4, name: 'Wednesday'},
            {id: 5, name: 'Thursday'},
            {id: 6, name: 'Friday'},
            {id: 7, name: 'Saturday'}
        ];
        var a = this.arrayHolder.filter(o => o.code =='DAYOFTHEWEEK');
            for(var data in a){
                const index: number = this.dayList.findIndex(x => x.name == a[data].day);
                    if (index !== -1) {
                        this.dayList.splice(index, 1);
                    } 
            }
        this.initialBusinessHours = [
            {id: 0, code: 'DAYOFTHEWEEK'},
            {id: 1, code: "SPECIFICDATE"}
        ];
        if(!_.isEmpty(this.dayList)){
            var code = this.businessCode.find(x => x.code == "DAYOFTHEWEEK");
            if(_.isEmpty(code)){
                this.businessCode = this.initialBusinessHours;
            }
        }
        // var deletedDate = this.mySelectedDates.find(x => x == datas.date)
        // if(!_.isEmpty(deletedDate)){
        //     this.mySelectedDates.forEach((value,index)=>{
        //             if(value==deletedDate) this.mySelectedDates.splice(index,1);
        //         });
        // }
        for (var i=this.mySelectedDates.length-1; i>=0; i--) {
            if (this.datepipe.transform(this.mySelectedDates[i], 'MMMM dd, yyyy')==this.datepipe.transform(datas.date, 'MMMM dd, yyyy')) {
                this.mySelectedDates.splice(i, 1);
            }
        }
    }

    save(): void {
        this.saving = true;
        this.timeId = localStorage.getItem('timeZoneId');
        this.businessInputList = [];
        for(var data in this.arrayHolder){
            this.businessInput = new BusinessHoursEditDto();
            if(this.arrayHolder[data].code=="DAYOFTHEWEEK"){
                this.businessInput.date = undefined;
                this.businessInput.day = this.arrayHolder[data].day;
            }
            if(this.arrayHolder[data].code=="SPECIFICDATE"){
                this.businessInput.day = undefined;
                this.businessInput.date = moment.tz(this.arrayHolder[data].date.toDateString(), this.timeId);
            }
            var opening = moment(this.arrayHolder[data].opening).tz(this.timeId);
            var closing = moment(this.arrayHolder[data].closing).tz(this.timeId);
            this.businessInput.code = this.arrayHolder[data].code;
            this.businessInput.isClosed = this.arrayHolder[data].isClosed;
            this.businessInput.openingTimeString = new Date(opening.format()).toLocaleTimeString('en-US', {
                hour12: true,
                hour: "numeric",
                minute: "numeric",
                second: "numeric"
            }) as any;
            this.businessInput.closingTimeString = new Date(closing.format()).toLocaleTimeString('en-US', {
                hour12: true,
                hour: "numeric",
                minute: "numeric",
                second: "numeric"
            }) as any;
            this.businessInput.id = this.arrayHolder[data].id;
            this.businessInputList.push(this.businessInput)
            
        }
        this.hourInput.createOrEditBusinessHours = this.businessInputList;
        this.hourInput.contactId = this.contactId;
        this._businessHourRepository.createOrEditBusinessHours(this.hourInput)
            .pipe(finalize(() => { this.saving = false; this.spinnerService.hide()}))
            .subscribe(() =>{
                this.notify.info(this.l('SavedSuccessfully'));
                this.spinnerService.hide()
                this.close();
                this.modalSave.emit(null);
            });
        this.dayList = [
            { id: 1, name: 'Sunday' },
            { id: 2, name: 'Monday' },
            { id: 3, name: 'Tuesday' },
            { id: 4, name: 'Wednesday' },
            { id: 5, name: 'Thursday' },
            { id: 6, name: 'Friday' },
            { id: 7, name: 'Saturday' }
        ];
    }

    close(): void {
        this.modal.hide();
        this.active = false;
        this.initialValues = []
    }

    getBusinessHourCode(): void {
        this._businessHourRepository.getBusinessHourCode()
            .subscribe(result => {
                var i = 0;
                this.businessCode = [];
                this.initialBusinessHours = [];
                for(var data in result){
                    var array = {id:i, code: result[data].code};
                    this.businessCode.push(array);
                    this.initialBusinessHours.push(array);
                    i++;
                }
                if(_.isEmpty(this.dayList)){
                    var code = this.businessCode.find(x => x.code == "DAYOFTHEWEEK");
                    if(!_.isEmpty(code)){
                        this.businessCode.forEach((value,index)=>{
                            if(value.id==code.id) this.businessCode.splice(index,1);
                        });
                    }
                    this.initialValues['code'] = 'SPECIFICDATE';
                }
            });
        this._businessHourRepository.getDateOfTheWeek()
            .subscribe(result => {
                this.businessDayOfTheWeekCode = result;
            });
    }
    getBusinessHours() {
        this.spinnerService.show();
        this._businessHourRepository.getBusinessHours()
            .pipe(catchError((err, caught): any => {
                this.spinnerService.hide();
            }))
            .subscribe((result: GetBusinessHoursDto[]) => {
                this.businessCount = result == null ? 0 : result.length - 1;
                var hours = result;
                this.arrayDayHolder = [];
                this.arrayDateHolder = [];
                this.arrayHolder = [];
                this.dayList = [
                    { id: 1, name: 'Sunday' },
                    { id: 2, name: 'Monday' },
                    { id: 3, name: 'Tuesday' },
                    { id: 4, name: 'Wednesday' },
                    { id: 5, name: 'Thursday' },
                    { id: 6, name: 'Friday' },
                    { id: 7, name: 'Saturday' }
                ];
                this.dayListSel = [];
                this.mySelectedDates = [];
                this.timeId = localStorage.getItem('timeZoneId');
                let arrayDay = {}, arrayDate = {};
                for (var data in hours) {
                    let closing = this.today.toDateString() + ' ' + hours[data].closingTimeS;
                    let opening = this.today.toDateString() + ' ' + hours[data].openingTimeS;
                    if (hours[data].code == "DAYOFTHEWEEK") {
                        for (var data1 in this.dayList) {
                            if (hours[data].day == this.dayList[data1].name) {
                                arrayDay = {
                                    'id': hours[data].id,
                                    'code': hours[data].code,
                                    'date': moment.tz(hours[data].date, this.timeId).toDate(),
                                    'day': hours[data].day,
                                    'isClosed': hours[data].isClosed,
                                    'closing': moment(closing).toDate(),
                                    'opening': moment(opening).toDate(),
                                    'sort': this.dayList[data1].id,
                                    'dateString': hours[data].dateString,
                                    'openingTimeString': hours[data].openingTimeString,
                                    'closingTimeString': hours[data].closingTimeString,
                                    'closingTimeS': hours[data].closingTimeS,
                                    'openingTimeS': hours[data].openingTimeS
                                }
                                this.arrayDayHolder.push(arrayDay);
                            }
                        }
                    } else {
                        arrayDate = {
                            'id': hours[data].id,
                            'code': hours[data].code,
                            'date': moment.tz(hours[data].date, this.timeId).toDate(),
                            'day': hours[data].day,
                            'isClosed': hours[data].isClosed,
                            'closing': moment(closing).toDate(),
                            'opening': moment(opening).toDate(),
                            'dateString': hours[data].dateString,
                            'openingTimeString': hours[data].openingTimeString,
                            'closingTimeString': hours[data].closingTimeString,
                            'closingTimeS': hours[data].closingTimeS,
                            'openingTimeS': hours[data].openingTimeS
                        }
                        this.arrayDateHolder.push(arrayDate);
                        this.mySelectedDates.push(moment.tz(hours[data].date, this.timeId).toDate());
                    }
                }
                this.arrayDayHolder = this.arrayDayHolder == [] ? [] :  _.sortBy(this.arrayDayHolder, 'sort');
                this.arrayDateHolder = this.arrayDateHolder == [] ? [] : this.arrayDateHolder.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());;
                if (this.arrayDayHolder != []) {
                    for (var x in this.arrayDayHolder) {
                        this.arrayHolder.push(this.arrayDayHolder[x]);
                    }
                }
                if (this.arrayHolder != []) {
                    for (var x in this.arrayDateHolder) {
                        this.arrayHolder.push(this.arrayDateHolder[x]);
                    }
                }
                var a = this.arrayHolder.filter(o => o.code =='DAYOFTHEWEEK');
                for(var data in a){
                    const index: number = this.dayList.findIndex(x => x.name == a[data].day);
                        if (index !== -1) {
                            this.dayList.splice(index, 1);
                        } 
                }
                this.initialBusinessHours = [
                    {id: 0, code: 'DAYOFTHEWEEK'},
                    {id: 1, code: "SPECIFICDATE"}
                ];
                if(!_.isEmpty(this.dayList)){
                    var code = this.businessCode.find(x => x.code == "DAYOFTHEWEEK");
                    if(_.isEmpty(code)){
                        this.businessCode = this.initialBusinessHours;
                    }
                }
                this.spinnerService.hide();
            });
    }

}