import { Component, ViewChild, Injector, Output, EventEmitter, OnInit} from '@angular/core';
import { ModalDirective, TabsetComponent } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { RouteHandOffScheduleDetailsServiceProxy, CreateOrEditRouteHandOffScheduleDetailDto, RouteHandOffDefinitionsServiceProxy, CreateOrEditRouteHandOffScheduleDto, RouteDefinitionsServiceProxy, CreatePostalCodeInput, CreateContactInput, CreateAddressInput, PostalCodeServiceProxy } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import { ActivatedRoute } from '@angular/router';
import { ContactFormMainComponent } from '@app/shared/layout/formMain/contact.form.component';
import { AddressFormComponent } from '@app/shared/layout/form/address-form.component';
import { RouteHandOffScheduleDetailRouteTemplateLookupTableModalComponent } from './routeHandOffScheduleDetail-routeTemplate-lookup-table-modal.component';
//import { RouteHandOffScheduleDetailRouteTypeLookupTableModalComponent } from './routeHandOffScheduleDetail-routeType-lookup-table-modal.component';

@Component({
    selector: 'createOrEditRouteHandOffScheduleDetailModal',
    templateUrl: './create-or-edit-routeHandOffScheduleDetail-modal.component.html'
})
export class CreateOrEditRouteHandOffScheduleDetailModalComponent extends AppComponentBase implements OnInit {

    @ViewChild(ContactFormMainComponent, { static: false }) contactForm;
    @ViewChild(AddressFormComponent, { static: false }) addressForm;
    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;
    @ViewChild('#routeHandOffScheduleTab', { static: false }) staticTabs: TabsetComponent;
    @ViewChild('routeHandOffScheduleDetailRouteTemplateLookupTableModal', { static: true }) routeHandOffScheduleDetailRouteTemplateLookupTableModal: RouteHandOffScheduleDetailRouteTemplateLookupTableModalComponent;
    //@ViewChild('routeHandOffScheduleDetailRouteTypeLookupTableModal', { static: true }) routeHandOffScheduleDetailRouteTypeLookupTableModal: RouteHandOffScheduleDetailRouteTypeLookupTableModalComponent;

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

    routeHandOffScheduleDetail: CreateOrEditRouteHandOffScheduleDetailDto = new CreateOrEditRouteHandOffScheduleDetailDto();
    input: CreateOrEditRouteHandOffScheduleDto = new CreateOrEditRouteHandOffScheduleDto();
    postalCodes: CreatePostalCodeInput = new CreatePostalCodeInput();
    contact: CreateContactInput = new CreateContactInput();
    address: CreateAddressInput = new CreateAddressInput();
    routeTemplateName = '';
    routeTypeRouteTypeCode = '';
    active = false;
    saving = false;
    activeTabIndex: number = 0;
    routeTypes: any;
    routeDefinitions: any;
    maxCount = 1000;
    edit = false;
    eta: any;
    etaMonday: any;
    etaTuesday: any;
    etaWednesday: any;
    etaThursday: any;
    etaFriday: any;
    etaSaturday: any;
    etaSunday: any;
    effectivityDate: any;
    contactId: any;
    paramId: any;
    firstName: string;
    lastName: string;
    phoneNumber: string;
    emailAddress: string;
    showSearchOnRouteCode: boolean;

    constructor(
        injector: Injector,
        private _routeHandOffScheduleDetailsServiceProxy: RouteHandOffScheduleDetailsServiceProxy,
        private _routeHandOffDefinitionsServiceProxy: RouteHandOffDefinitionsServiceProxy,
        private _activatedRoute: ActivatedRoute,
        private _routeDefinitionsServiceProxy: RouteDefinitionsServiceProxy,
        private _postalCodeServiceProxy: PostalCodeServiceProxy

    ) {
        super(injector);
    }

    ngOnInit() {
        this.getRouteDefinitions();
    }

    show(routeHandOffScheduleDetails: any, routeHandOffScheduleDetailId?: any): void {
        let today = new Date();
        let that = this;
        this.showSearchOnRouteCode = true;

        $(document).ready(function() {

            $('#routeDefinition').on('select2:select', function (e) {
                let data = e.params.data;
                let selectedRouteDefintion = that.routeDefinitions.find(i => i.routeTemplateId == data.id);

                that.routeHandOffScheduleDetail.routeTemplateId = selectedRouteDefintion.routeTemplateId;
                that.routeHandOffScheduleDetail.routeCode = selectedRouteDefintion.routeTemplateName;
                that.routeHandOffScheduleDetail.routeTypeId = selectedRouteDefintion.routeDefinition.routeTypeId;

                that.getAllDropDown();
            });

        });

        if (routeHandOffScheduleDetails == undefined) {

            this.getParamId();
            this.routeHandOffScheduleDetail.isActive = true;
            this.etaMonday = today;
            this.etaTuesday = today;
            this.etaWednesday = today;
            this.etaThursday = today;
            this.etaFriday = today;
            this.etaSaturday = today;
            this.etaSunday = today;
            this.eta = today;
            this.routeTemplateName = '';
            this.routeTypeRouteTypeCode = '';
            this.getAllDropDown();
            this.active = true;
            this.modal.show();
            this.firstName = '';
            this.lastName = '';
            this.phoneNumber = '';
            this.emailAddress = '';
            this.contactId = 0;

        } else {

            today = moment(routeHandOffScheduleDetails.today).tz(localStorage.getItem('timeZoneId')).toDate();
            this.edit = true;
            this.routeHandOffScheduleDetail = routeHandOffScheduleDetails;
            this.paramId = routeHandOffScheduleDetailId;
            this.active = true;
            this.showSearchOnRouteCode = false;
            this.modal.show();

            let mondayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.mondayETATime;
            let tuesdayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.tuesdayETATime;
            let wednesdayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.wednesdayETATime;
            let thursdayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.thursdayETATime;
            let fridayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.fridayETATime;
            let saturdayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.saturdayETATime;
            let sundayEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.sundayETATime;
            let dateEta = today.toDateString() + ' ' + routeHandOffScheduleDetails.estimatedTimeOfArrival;

            this.eta = dateEta;
            this.etaMonday = moment(mondayEta).toDate();
            this.etaTuesday = moment(tuesdayEta).toDate();
            this.etaWednesday = moment(wednesdayEta).toDate();
            this.etaThursday = moment(thursdayEta).toDate();
            this.etaFriday = moment(fridayEta).toDate();
            this.etaSaturday = moment(saturdayEta).toDate();
            this.etaSunday = moment(sundayEta).toDate();
            this.effectivityDate = routeHandOffScheduleDetails.effectivityDate.toDate();

            this.firstName = routeHandOffScheduleDetails.contact.firstName;
            this.lastName = routeHandOffScheduleDetails.contact.lastName;
            this.emailAddress = routeHandOffScheduleDetails.emailAddress;
            this.phoneNumber = routeHandOffScheduleDetails.phoneNumber;
            this.contactId = routeHandOffScheduleDetails.contactId;

            this._postalCodeServiceProxy.getPostalCodeEdit(routeHandOffScheduleDetails.address.postalCodeId).subscribe(result => {
                this.addressForm.city = result.city;
                this.addressForm.country = result.country;
                this.addressForm.value = result.value;
                this.addressForm.state = result.state;
                this.addressForm.formattedAddress = routeHandOffScheduleDetails.address.addressLine1 + ' ' + result.city + ', ' + result.state + ' ' + result.value + ', ' + result.country;
                this.addressForm.address = routeHandOffScheduleDetails.address;
                this.addressForm.latitude = routeHandOffScheduleDetails.latitude;
                this.addressForm.longitude = routeHandOffScheduleDetails.longitude;
                console.log(this.addressForm);
            });

            this.getAllDropDown();

        }
    }

    save(): void {

        this.saving = true;

        this.routeHandOffScheduleDetail.routeHandOffDefinitionId = Number(this.paramId);
        this.routeHandOffScheduleDetail.routeTypeId = Number((<HTMLInputElement>document.getElementById('routeType')).value);
        this.routeHandOffScheduleDetail.effectivityDate = moment(this.effectivityDate).tz(localStorage.getItem('timeZoneId'));
        this.routeHandOffScheduleDetail.oorRate = this.routeHandOffScheduleDetail.serviceTime || this.routeHandOffScheduleDetail.oorRate  == null ? 0 : this.routeHandOffScheduleDetail.oorRate;
        this.routeHandOffScheduleDetail.dateEtaLocked = this.routeHandOffScheduleDetail.dateEtaLocked != null ? moment.utc(this.routeHandOffScheduleDetail.dateEtaLocked) : this.routeHandOffScheduleDetail.dateEtaLocked;

        var etaMoment = moment(this.eta).tz(localStorage.getItem('timeZoneId'));
        var mondayEtaMoment = moment(this.etaMonday).tz(localStorage.getItem('timeZoneId'));
        var tuesdayEtaMoment = moment(this.etaTuesday).tz(localStorage.getItem('timeZoneId'));
        var wednesdayEtaMoment = moment(this.etaWednesday).tz(localStorage.getItem('timeZoneId'));
        var thursdayEtaMoment = moment(this.etaThursday).tz(localStorage.getItem('timeZoneId'));
        var fridayEtaMoment = moment(this.etaFriday).tz(localStorage.getItem('timeZoneId'));
        var saturdayEtaMoment = moment(this.etaSaturday).tz(localStorage.getItem('timeZoneId'));
        var sundayEtaMoment = moment(this.etaSunday).tz(localStorage.getItem('timeZoneId'));

        this.routeHandOffScheduleDetail.estimatedTimeOfArrival = etaMoment;
        this.routeHandOffScheduleDetail.etaTime = new Date(etaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.mondayETATime = new Date(mondayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.tuesdayETATime = new Date(tuesdayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.wednesdayETATime = new Date(wednesdayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.thursdayETATime = new Date(thursdayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric",  minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.fridayETATime = new Date(fridayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.saturdayETATime = new Date(saturdayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;
        this.routeHandOffScheduleDetail.sundayETATime = new Date(sundayEtaMoment.format()).toLocaleTimeString('en-US', { hour12: true, hour: "numeric", minute: "numeric", second: "numeric"}) as any;

        if (this.routeHandOffScheduleDetail.routeTemplateId === undefined) {
            this.saving = false;
            (<HTMLInputElement>document.getElementById('routeTemplateDiv')).style.color = '#FF3300';
        }

        if (this.routeHandOffScheduleDetail.routeTypeId === 0) {
            this.saving = false;
            (<HTMLInputElement>document.getElementById('routeTypeDiv')).style.color = '#FF3300';
        }

        if (!this.routeHandOffScheduleDetail.effectivityDate.isValid()) {
            this.saving = false;
            (<HTMLInputElement>document.getElementById('effectiveDate')).style.color = '#FF3300';
        }

        this.postalCodes.city = this.addressForm.city;
        this.postalCodes.country = this.addressForm.country;
        this.postalCodes.value = this.addressForm.value;
        this.postalCodes.state = this.addressForm.state;

        this.contact.firstName = this.contactForm.fName;
        this.contact.lastName = this.contactForm.sName;
        this.routeHandOffScheduleDetail.emailAddress = this.contactForm.emailAddress;
        this.routeHandOffScheduleDetail.phoneNumber = this.contactForm.pNumber;

        this.routeHandOffScheduleDetail.contact = this.contact;
        this.routeHandOffScheduleDetail.address = this.addressForm.address;
        this.routeHandOffScheduleDetail.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value) == 0 ? null : Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);
        this.routeHandOffScheduleDetail.latitude = this.addressForm.latitude;
        this.routeHandOffScheduleDetail.longitude = this.addressForm.longitude;

        this.routeHandOffScheduleDetail.contactId = this.contactId;

        if (this.saving == true) {
            this._postalCodeServiceProxy.createPostalCode(this.postalCodes).pipe().subscribe(result => {
                this.routeHandOffScheduleDetail.address.postalCodeId = result;
                this._routeHandOffScheduleDetailsServiceProxy.createOrEdit(this.routeHandOffScheduleDetail)
                .pipe(finalize(() => { this.saving = false; }))
                .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.modalSave.emit(null);
                    this.close();
                }, error => {
                    console.log(error);
                });
            });
        }

    }

    setRouteTemplateIdNull() {
        this.showSearchOnRouteCode = true;
        this.routeHandOffScheduleDetail.routeTemplateId = null;
        this.routeHandOffScheduleDetail.routeCode = '';
        this.routeTemplateName = '';
    }

    // setRouteTypeIdNull() {
    //     this.routeHandOffScheduleDetail.routeTypeId = null;
    //     this.routeTypeRouteTypeCode = '';
    // }

    close(): void {
        this.edit = false;
        this.routeHandOffScheduleDetail = new CreateOrEditRouteHandOffScheduleDetailDto();
        this.effectivityDate = null;
        this.active = false;
        this.modal.hide();
    }

    getAllDropDown() {
        jQuery(document).ready(function () {
            $('.kt-select2').select2();
            $('.select2-container').css('width', '100%');
        });

        this.getRouteTypes();
        this.getRouteDefinitions();
    }

    getRouteTypes() {
        this._routeHandOffDefinitionsServiceProxy.getAllRouteTypeForLookupTable(undefined, undefined, undefined, this.maxCount).subscribe(result => {
            this.routeTypes = result.items;
        });
    }

    getRouteDefinitions() {
        this._routeDefinitionsServiceProxy.getAll(
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                this.maxCount
        ).subscribe(result => {
            this.routeDefinitions = result.items;
        });
    }

    getParamId() {
        this._activatedRoute.paramMap.subscribe(params => {
            this.paramId = params.get('id');
        });
    }

    openSelectRouteTemplateModal() {
        this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.filterText = this.routeHandOffScheduleDetail.routeCode;
        this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.id = this.routeHandOffScheduleDetail.routeTemplateId;
        this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.displayName = this.routeHandOffScheduleDetail.routeCode;
        this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.displayName = this.routeTemplateName;
        this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.show();
    }

    // openSelectRouteTypeModal() {
    //     this.routeHandOffScheduleDetailRouteTypeLookupTableModal.id = this.routeHandOffScheduleDetail.routeTypeId;
    //     this.routeHandOffScheduleDetailRouteTypeLookupTableModal.displayName = this.routeTypeRouteTypeCode;
    //     this.routeHandOffScheduleDetailRouteTypeLookupTableModal.show();
    // }

    getNewRouteTemplateId() {
        this.showSearchOnRouteCode = false;
        this.routeHandOffScheduleDetail.routeTemplateId = this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.id;
        this.routeHandOffScheduleDetail.routeCode = this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.displayName;
        this.routeTemplateName = this.routeHandOffScheduleDetailRouteTemplateLookupTableModal.displayName;
    }

    // getNewRouteTypeId() {
    //     this.routeHandOffScheduleDetail.routeTypeId = this.routeHandOffScheduleDetailRouteTypeLookupTableModal.id;
    //     this.routeTypeRouteTypeCode = this.routeHandOffScheduleDetailRouteTypeLookupTableModal.displayName;
    // }

}