import { Component, ViewChild, Injector, Output, EventEmitter, Directive, ViewContainerRef } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { GetOrderStatusTypeForViewDto, OrderStatusTypeDto, GeocodeIdInput,DriverProximityDetails, AcceptProximityInput, ProximityServiceProxy, DriverProximityServiceProxy, AddressIdInput, ControllerRouteDetailServiceProxy } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ILatLng } from './driver-proximities.directive';
import { AgmInfoWindow } from '@agm/core';
import { finalize } from 'rxjs/operators';
import { AppSessionService } from '@shared/common/session/app-session.service';
import * as moment from 'moment';
import { lt } from 'lodash';
  // the will keep typescript from throwing errors w.r.t the google object
  declare var google: any;

@Component({
    selector: 'viewDriverProximitiesMapModal',
    styleUrls: ['./view-driver-proximities-map.component.less'],
    templateUrl: './view-driver-proximities-map.component.html'
})

export class ViewDriverProximitiesMapComponent extends AppComponentBase {

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
    previousIW: AgmInfoWindow;
    
    active = false;
    saving = false;

    item: DriverProximityDetails;
    lat1: number;
    lat2: number;
    long1: number;
    long2: number;

    lat: number = 34.044971;
    lng: number = -118.291243;

    map: any;
    
    origin: ILatLng = {
        latitude: 38.889931,
        longitude: -77.009003
      };
      // New York City, NY, USA
      destination: ILatLng = {
        latitude: 40.730610,
        longitude: -73.935242
      };

      displayDirections = true;
      zoom = 22;

      routeCode: string;
      driverName: string;
      appSession: AppSessionService;
      googleMap = null; 
      isEnabledLaboratory : boolean;
      sameGeocode: boolean;
      driverPage: boolean;
      infoWindowOpened = null
    previous_info_window = null
    constructor(
        injector: Injector,
        private _proximityCodeService: DriverProximityServiceProxy, 
        private viewContainerRef: ViewContainerRef,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,

    ) {
        super(injector);
        this.previousIW = null;
    }

    ngOnInit(): void {
        this.isEnabledLaboratory = abp.features.isEnabled('App.ControllerRouteManagementFeature.RouteDetailsManagementFeature');
    }
    show(item: DriverProximityDetails, routeCode: string, driverName: string, driverPage: boolean): void {
        
        this.item = item;
        this.routeCode = routeCode;
        this.driverName = driverName;
        this.driverPage = driverPage;

        if(item.geocodeDel!=null && item.geocode.longitude==item.geocodeDel.longitude && item.geocode.latitude == item.geocodeDel.latitude)
        {
            this.sameGeocode = true;
            // var bounds = new google.maps.LatLngBounds();
            // bounds.extend(new google.maps.LatLng({ lat: item.geocode.latitude, lng: item.geocode.longitude }));
            // this.map.fitBounds(bounds)
        }else{
            this.sameGeocode = false;
        }

        let x: ILatLng = {
            longitude : item.geocodeDel==null ? item.geocode.longitude : item.geocodeDel.longitude,
            latitude : item.geocodeDel==null ? item.geocode.latitude : item.geocodeDel.latitude,
        }

        let y: ILatLng = {
            longitude : item.geocode.longitude,
            latitude : item.geocode.latitude,
        }

        this.origin = x;
        this.destination = y;
        this.lat1 = item.geocodeDel==null ? item.geocode.longitude :item.geocodeDel.latitude;
        this.lat2 = item.geocode.latitude;
        this.long1 = item.geocodeDel==null ? item.geocode.latitude : item.geocodeDel.longitude;
        this.long2 = item.geocode.longitude;
        this.active = true;
        console.log(item);
        // $('.gm-style-iw-a').css('display','block');
        this.modal.show();
    }

    close(): void {
        this.active = false;
        // const infowindow2 = new google.maps.InfoWindow();
        // infowindow2.close();
        // $('.gm-style-iw-t').css('display','none');
        this.modal.hide();
    }

    mapReady(event?: any) {
        this.map = event;
    }

    getParentComponent() {
        return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component
    }


    acceptProximity(item: DriverProximityDetails): void {
        this.message.confirm(
            'You are updating ' + item.customer + ' geocoordinates with Latitude: ' + item.geocode.latitude + ', Longitude: ' + item.geocode.longitude + '?',
            '',
            (isConfirmed) => {

                if (isConfirmed) {
                    var data = new AddressIdInput;
                    data.id = item.addressId;
                    data.orderId = item.orderId;
                    this.spinnerService.show();
                    this._controllerRouteDetails.updateClinicGeocode(data)
                        .pipe(finalize(() => { this.saving = false; }))
                        .subscribe(() => {
                            this.item.isAccepted=true;
                            this.item.lastModifierUser = this.appSession.user.name +" " +this.appSession.user.surname
                            this.item.lastModificationTime = moment(Date.now()).local().format('MM/DD/YYYY hh:mm a');
                            this.notify.info(this.l('SavedSuccessfully'));
                            if(this.driverPage){
                                this.getParentComponent().getDriverProximity();
                            }else{
                                this.getParentComponent().getRouteDetails();
                            }
                            this.spinnerService.hide();
                        });
                }
            }
        );
    }

    acceptProximityStatus(item: DriverProximityDetails): void {
        this.message.confirm(
            'You are updating ' + item.customer + ' geocoordinates with Latitude: ' + item.geocodeStatus.latitude + ', Longitude: ' + item.geocodeStatus.longitude + '?',
            '',
            (isConfirmed) => {

                if (isConfirmed) {
                    var data = new GeocodeIdInput;
                    data.addressId = item.addressId;
                    data.geocodeId = item.geocodeStatus.id;
                    this.spinnerService.show();
                    this._controllerRouteDetails.updateClinicGeocodeByStatus(data)
                        .pipe(finalize(() => { this.saving = false; }))
                        .subscribe(() => {
                            this.item.isAccepted=true;
                            this.item.lastModifierUser = this.appSession.user.name +" " +this.appSession.user.surname
                            this.item.lastModificationTime = moment(Date.now()).local().format('MM/DD/YYYY hh:mm a');
                            this.notify.info(this.l('SavedSuccessfully'));
                            if(this.driverPage){
                                this.getParentComponent().getDriverProximity();
                            }else{
                                this.getParentComponent().getRouteDetails();
                            }
                            this.spinnerService.hide();
                        });
                }
            }
        );
    }

    recenterMap(lt, lg){
        this.lat = lt;
        this.lng = lg;
        this.zoom = 14;
      }

      close_window(){
        if (this.previous_info_window != null ) {
          this.previous_info_window.close()
          }    
        }
        
        select_marker(data,infoWindow){
         if (this.previous_info_window == null)
          this.previous_info_window = infoWindow;
         else{
          this.infoWindowOpened = infoWindow
          this.previous_info_window.close()
         }
         this.previous_info_window = infoWindow
        }
}