import { Component, ViewChild, Injector, Output, Input, EventEmitter, OnInit, AfterViewInit } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { RouteStopsServiceProxy, CreateOrEditRouteStopDto, CreatePostalCodeInput, LocationServiceProxy, LocationNameDto } from '@shared/service-proxies/service-proxies';
import { AddressServiceProxy, CreateAddressInput } from '@shared/service-proxies/service-proxies';
import { EmailServiceProxy, CreateEmailInput, AddressTypeServiceProxy, PostalCodeServiceProxy, } from '@shared/service-proxies/service-proxies';

import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';
import { RouteStopContactLookupTableModalComponent } from './routeStop-contact-lookup-table-modal.component';
import { AddressFormComponent } from '@app/shared/layout/form/address-form.component';


@Component({
    selector: 'createOrEditRouteStopModal',
    templateUrl: './create-or-edit-routeStop-modal.component.html'
})
export class CreateOrEditRouteStopModalComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;
    @ViewChild('routeStopContactLookupTableModal', { static: true }) routeStopContactLookupTableModal: RouteStopContactLookupTableModalComponent;
    @ViewChild(AddressFormComponent, { static: false }) addressForm;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    @Input('selectedCountry') selectedCountry: string;
    @Input('selectedCity') selectedCity: string;
    @Input('selectedState') selectedState: string;
    @Input('postalCodeId') selectedPostalCodeId: number;
    @Input('postalCodeValue') selectedPostalCodeValue: string;
    active = false;
    saving = false;
    routeStop: CreateOrEditRouteStopDto = new CreateOrEditRouteStopDto();
    address: CreateAddressInput = new CreateAddressInput();
    postalCodeInput: CreatePostalCodeInput = new CreatePostalCodeInput();
    contactAddress = '';
    filteredLocations: LocationNameDto[];
    constructor(
        injector: Injector,
        private _addressService: AddressServiceProxy,
        private _emailService: EmailServiceProxy,
        private _postalCodeServiceProxy: PostalCodeServiceProxy,
        private _routeStopsServiceProxy: RouteStopsServiceProxy,
        private _locationService: LocationServiceProxy,
    ) {
        super(injector);
    }
    filteredCountries: any;
    filteredCities: any;
    filteredStates: any;
    filteredPostal: any;
    filteredAddressType: any;
    selectedPostalCode: string;
    selectedPostalCodeA: string;
    selectedAddressType: any;
    postalCodeValue: any;
    postalCodeId: number;
    filterChange = false;
    stateFeature: boolean;
    eta: any;
    locationId: number = 0;
    ngOnInit() {
        this.stateFeature = abp.features.isEnabled('App.StateFeature');
        this.filterLocation();
    }

    onShown() {
        $('.kt-select2').select2();
    }
    show(routeStopId?: number): void {
        let today = new Date();
        $(".select2-container").css("width", "100%");
        this.spinnerService.show();
        if (!routeStopId) {
            this.routeStop = new CreateOrEditRouteStopDto();
            this.routeStop.id = routeStopId;
            this.address.addressLine1 = '';
            this.address.addressLine2 = '';
            this.active = true;
            this.modal.show();
            this.spinnerService.hide();
            this.locationId = 0;
            this.eta = null;
        } else {
            this._routeStopsServiceProxy.getRouteStopForEdit(routeStopId).subscribe(result => {
                this.routeStop = result.routeStop;
                this.address = this.routeStop.address;
                this.locationId = result.routeStop.locationId == null ? 0 : result.routeStop.locationId;
                this.postalCodeId = result.routeStop.address.postalCodeId;
                var eta = result.deliveryEta == null ? null : moment.parseZone(result.deliveryEta).format('h:mm a');
                let mondayEta = eta == null ? null : today.toDateString() + ' ' + eta;
                this.eta = mondayEta == null ? null : moment(mondayEta).toDate();
                this._postalCodeServiceProxy.getPostalCodeEdit(this.postalCodeId)
                    .pipe()
                    .subscribe(result => {
                        this.addressForm.city = result.city
                        this.addressForm.state = result.state
                        this.addressForm.value = result.value
                        this.addressForm.country = result.country
                        this.postalCodeValue = result.country
                        this.spinnerService.hide();
                    });
                this.active = true;
                this.modal.show();
            });
        }
    }

    save(): void {
        this.saving = true;
        var etaMoment = moment(this.eta).tz(localStorage.getItem('timeZoneId'));
        this.routeStop.deliveryETA = null;
        this.routeStop.deliveryETAString = this.eta == null ? undefined : new Date(etaMoment.format()).toLocaleTimeString('en-US', {
            hour12: true,
            hour: "numeric",
            minute: "numeric",
            second: "numeric"
        }) as any;
        this.routeStop.locationId = Number((<HTMLInputElement>document.getElementById('textLocation')).value) == 0 ? null : Number((<HTMLInputElement>document.getElementById('textLocation')).value);
        this.address = this.addressForm.address
        this.address.addressTypeId = Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value) == 0 ? null : Number((<HTMLInputElement>document.getElementById('addressTypeSelectInput')).value);
        this.routeStop.latitude = Number((<HTMLInputElement>document.getElementById('Address_GeocodeLatitude')).value);
        this.routeStop.longitude = Number((<HTMLInputElement>document.getElementById('Address_GeocodeLongitude')).value);
        this.routeStop.address = this.address;
        this.postalCodeInput.city = this.addressForm.city;
        if (!this.stateFeature) {
            this.postalCodeInput.state = "";
        }
        else {
            this.postalCodeInput.state = this.addressForm.state;
        }
        this.postalCodeInput.country = this.addressForm.country
        this.postalCodeInput.value = this.addressForm.value;
        if (this.eta == null || this.routeStop.locationId == null) {
            if (this.eta == null) {
                this.saving = false;
                (<HTMLInputElement>document.getElementById('deliveryEtaDiv')).style.color = "#FF3300";
            }
            if (this.routeStop.locationId == null) {
                this.saving = false;
                (<HTMLInputElement>document.getElementById('locationDiv')).style.color = "#FF3300";
            }
        }
        console.log(this.eta);
        console.log(this.routeStop.locationId);

        if (this.eta != null && this.routeStop.locationId != null) {
            (<HTMLInputElement>document.getElementById('locationDiv')).style.color = "#646C9A";
            (<HTMLInputElement>document.getElementById('deliveryEtaDiv')).style.color = "#646C9A";
            this._postalCodeServiceProxy.createPostalCode(this.postalCodeInput)
                .pipe()
                .subscribe(result => {
                    this.routeStop.address.postalCodeId = result
                    console.log(this.routeStop);
                    this._routeStopsServiceProxy.createOrEdit(this.routeStop)
                        .pipe(finalize(() => { this.saving = false; }))
                        .subscribe(() => {
                            this.notify.info(this.l('SavedSuccessfully'));
                            this.close();
                            this.modalSave.emit(null);
                        });
                });
        }
    }
    getAllDropDown() {
        this.clearFields();
        let maxcount = 1000;
        let that = this;
    }

    clearFields() {
        this.routeStop.email = null;
        this.routeStop.contactPerson = null;
        this.routeStop.routeStop = null;
        this.address.addressLine1 = null;
        this.address.addressLine2 = null;
        this.address.postalCodeId = null;
        this.selectedPostalCodeValue = null;
        this.selectedPostalCode = null;
        this.selectedPostalCodeId = null;
        this.selectedCountry = null;
        this.selectedState = null;
        this.selectedCity = null;
        this.routeStop.latitude = null;
        this.routeStop.longitude = null;
        this.eta = null;
    }

    close(): void {
        this.active = false;
        this.clearFields()
        this.modal.hide();
    }
    filterCountries(postalCode): void {
        this._postalCodeServiceProxy.getDistinctCountry(
            postalCode,
            undefined
        ).subscribe(result => {
            this.filteredCountries = result.items;

        });
    }

    filterLocation(): void {
        this._locationService.getLocationNames(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)
            .subscribe(result => {
                this.filteredLocations = result;
                console.log(this.filteredLocations);
            });
    }
}