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 { finalize } from 'rxjs/operators';
declare var KTWizard: any;
declare var $: any;
declare var KTApp: any;
declare let swal: 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();
    arrayHolder = [];
    timeId:any;
    hourInput = new CreateOrEditBusinessHoursInput();
    businessInputList: Array<BusinessHoursEditDto> = [];
    businessInput = new BusinessHoursEditDto ();
    contactId : number;
    constructor(
        injector: Injector,
        private _businessHourRepository: BusinessHoursServiceProxy
    ) {
        super(injector);
    }

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

    show(hours: GetBusinessHoursDto[], contactId: number): void {
        this.timeId = localStorage.getItem('timeZoneId');
        this.contactId = contactId;
        this.today = new Date();
        this.arrayHolder = [];
        // this.today = moment(this.today).tz(localStorage.getItem('timeZoneId')).toDate();
        let array={};
        for(var data in hours){
            let closing = this.today.toDateString() + ' ' + hours[data].closingTimeS;
            let opening = this.today.toDateString() + ' ' + hours[data].openingTimeS;
            array = {
                    '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(),

                }
            this.arrayHolder.push(array);
        }
        this.hours = hours;
        this.active = true;
        this.modal.show();
    }

    onShown(): void {
        $('.kt-select2').select2();
        // this.nameInput.nativeElement.focus();
    }

    addHour(){
        let array = {};
        array = {
            'id': undefined,
            'code': "DAYOFTHEWEEK",
            'date': moment.tz(this.today, this.timeId).toDate(),
            'day': "Tuesday",
            'isClosed': true,
            'closing': moment(this.today).toDate(),
            'opening': moment(this.today).toDate(),
        }
        this.arrayHolder.push(array);
    }
    deleteHour(id: number){
        this.arrayHolder.splice(id, 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);
            })
    }

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

    getBusinessHourCode(): void {
        this._businessHourRepository.getBusinessHourCode()
            .subscribe(result => {
                this.businessHourCode = result;
            });
        this._businessHourRepository.getDateOfTheWeek()
            .subscribe(result => {
                this.businessDayOfTheWeekCode = result;
            });
    }

}