import { Component, ViewEncapsulation, Injector, OnInit, DoCheck, ViewChild, Input, AfterViewInit,ViewContainerRef, ChangeDetectorRef } from "@angular/core";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { AppComponentBase } from "@shared/common/app-component-base";
import { Router, ActivatedRoute } from "@angular/router";
import * as moment from 'moment';
import { LocationServiceProxy, LocationListDto, LocatorServiceProxy,MoveOrder, MobileThemeServiceProxy, PagedResultDtoOfAddressAddressTypeLookupTableDto } from "@shared/service-proxies/service-proxies";
import { MapFlyOutComponent } from "@app/shared/layout/flyout/map/map-flyout.component";
import { empty } from "rxjs";
import { LaboratoryMapFlyOutComponent } from "@app/shared/layout/flyout/map/laboratory/laboratory-map-flyout.component";
import { finalize } from 'rxjs/operators';
import { ChangeDetectionStrategy } from "@angular/compiler/src/core";
import { AppConsts } from "@shared/AppConsts";
import {
    CommonModule,
    Location
} from '@angular/common';
import { AbpHttpConfiguration } from "abp-ng2-module/dist/src/abpHttpInterceptor";
import { AbpSessionService } from "abp-ng2-module/dist/src/session/abp-session.service";
import { AppUrlService } from "@shared/common/nav/app-url.service";
import { AppSessionService } from "@shared/common/session/app-session.service";
import { UpdateGeoCodeModalComponent } from "./update-geocode.component";

declare var $: any;

@Component({
    templateUrl: './locator.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./locator.component.less']
})

export class LocatorComponent extends AppComponentBase implements OnInit, AfterViewInit{

    @ViewChild('updateGeocode', {static: true}) updateGeocode: UpdateGeoCodeModalComponent;

    @Input() markers: marker[] = []; 
    @Input() latestLog: marker[] = []; 
    @Input() delmarkers: marker[] = []; 
    @Input() driverP: marker[] = []; 
    @Input() idle: marker[] = []; 

    chosenDate: Date;
    locationId: number;

    showMarkers: boolean = false;
    
    loaded1: boolean = false;
    loaded2: boolean = false;
    
    locationName: string;
    logo: any;
    icon: any;
    reload = true;
    route: Array<any> = [];
    routeIds: Array<any> = [];  
    routeSel: Array<any> = [];
    active: number;
    activeF: number;
    activeD: number;
    locations: LocationListDto[] = [];
    
    filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: Date;
        endDate: Date;
    } = <any>{};

    selection: Array<any> = [];
    todaysDate = moment().format('MM/DD/YYYY');

    zoom: number = 14;
    // initial center position for the map
    lat: number = 34.044971;
    lng: number = -118.291243;
    map: any;
    pin: { path: string; fillColor: string; fillOpacity: number; strokeColor: string; strokeWeight: number; scale: number; labelOrigin: { x: number; y: number; }; };
    
    laboratoryMapFeatureEdition: boolean = false;
    
    move: MoveOrder = new MoveOrder();

    @ViewChild('laboratoryMapFlyOutComponent', {static: false}) laboratoryMapFlyOutComponent: LaboratoryMapFlyOutComponent;
    @ViewChild('mapFlyOutComponent', {static: false}) mapFlyOutComponent: MapFlyOutComponent;
    

    
    orderId:number;
    locationFilter: number;
    noRouteId:string;
    saving = false;
    movetoRouteId:number;
    data: Array<any> = [];    
    ata: any[];
    isShow = true;
    changeDetection: ChangeDetectionStrategy.OnPush
    remoteServiceBaseUrl: string = AppConsts.remoteServiceBaseUrl;
    timeId: any;
    locatorDate: moment.Moment = moment();
    hasLogo: boolean = false;
    constructor(
        injector: Injector,
        private router: Router,
        private _locationServiceProxy: LocationServiceProxy,
        private activatedRoute: ActivatedRoute,
        private _locatorAppService: LocatorServiceProxy,
        private _themes: MobileThemeServiceProxy,
        private viewContainerRef: ViewContainerRef,
        private cd: ChangeDetectorRef,
        private readonly _appSessionService: AppSessionService,
        private _location: Location
    ) {
        super(injector);
        if(abp.auth.isGranted('Pages.Shipping.Locator') === false)
        {
           this._location.back();
        }
        this.laboratoryMapFeatureEdition = abp.features.isEnabled('App.LaboratoryMapFilter');
        this.chosenDate = new Date(Date.now());
    }


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

    ngOnInit(): void {

        this.timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(this.timeId);

        this.activatedRoute.paramMap.subscribe(params => {
            this.route = [+params.get("routeid")];
            this.active = 1;
            this.activeD = 1;
            this.activeF = 1;
            this.routeIds = [+params.get('oid')];
            this.routeSel = [+params.get('oid')];
        });

        if(localStorage.getItem('loadDate') == null)
        {
            $("#LocatorDate").val(moment(this.chosenDate).format('MM/DD/YYYY'));
        }
        else
        {
            $("#LocatorDate").val(moment(localStorage.getItem('loadDate')).format('MM/DD/YYYY'));
        }
        if(localStorage.getItem('operatingLocationId') != null) {
            this.locationId = parseInt(localStorage.getItem('operatingLocationId'));        
        }
        
        let that = this;
         
            this._locatorAppService.getMobileLogo().subscribe(result => {
                if(result.data != undefined){
                    this.logo = 'data:image/jpeg;base64,' + result.data;
                    this.hasLogo = true;
                }else{
                    this.hasLogo = false;
                }
            });

    }

    ngAfterViewInit(): void {

    }

    getLocationsOnLoad(id = undefined) {
        let that = this;
        return new Promise(function (resolve, reject) {
            that._locationServiceProxy.getLocation(id, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)
                .subscribe(result => {
                    // that.filters.locationFilter = result.items["0"].id;
                    that.locationName = result.items['0']['name'];
                    resolve(result.items["0"].id);
                });

        });

    }


    onChange(event){

    }


    showFlyOut(): void {

        //this.filters.startDate = moment(this.locatorDate).toDate();    

        if(this.laboratoryMapFeatureEdition){
            this.laboratoryMapFlyOutComponent.loadFlyOut();
        }else{
            this.mapFlyOutComponent.loadFlyOut();
        }
    }
    
    refresh(): void {
        if(this.laboratoryMapFeatureEdition){
            this.laboratoryMapFlyOutComponent.plotRouteMarker(true);
        }else{
            this.mapFlyOutComponent.plotRouteMarker(true);
        }
    }
    mapReady(event?: any) {

        this.map = event;
        this.markers = [];
        this.latestLog = [];
        this.delmarkers = [];
        this.driverP = [];    
        this.idle = [];    
    }

    clickedMarker(label: string, index: number) {
        
    }

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

   getOption(orderId){
        let x = 0;
        console.log(this.filters.startDate);
        this._locatorAppService.getRouteListDetail(orderId, moment.tz(this.filters.startDate, this.timeId), moment.tz(this.filters.startDate, this.timeId), this.filters.locationFilter)
        .subscribe(result=>{
            this.data = [];
            result.items.forEach(item =>{
                this.data.push(item);
                this.selection.forEach(marker=>{
                    if(item.routeId == marker.routeId){
                        this.data[x].color = marker.color;
                    }
                })
                x++;
            });
        });
    }

   
    save(orderId): void { 
        if(this.movetoRouteId !=null)
        {   
            this.saving = true;
            this.move.orderId = orderId;
            this.move.routeId = this.movetoRouteId;    
            this._locatorAppService.moveOrder(this.move)
                .pipe(finalize(() => { this.saving = false; }))
                .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.getParentComponent().mapFlyOutComponent.plotRouteMarker();
                });
        }
        else{
            this.notify.error(this.l('Please select Route Id first.'),('Move Order'));
        }       
    }

    getLocation(Id){  
        this.locations.forEach((x) => { 
            if (x.id == Id) {                
                this.locationName = x.name;
            }            
        });
    }  

    showGeocode(geocodeId, lat, lang){
        this.updateGeocode.show(geocodeId, lat, lang);
    }
}

// just an interface for type safety.
interface marker {
	lat: number;
	lng: number;
	label?: string;
    draggable: boolean;
    icon?: { path: string; fillColor: string; fillOpacity: number; strokeColor: string; strokeWeight: number; scale: number; labelOrigin: { x: number; y: number; } };
    driverName: string;
    orderId:string;
    eta:string;
    color?:string;
    companyName?:string;
    geocode?:number;
    vehicleColor?:string;
    statusCode?:string;
    statusTime?:string;
    statusDescription?:string;
    pickUpTime?:string;
    account?:string;
    routeCode?:string;
    orderType?:string;
    deliveryTime?:string;
}