import { Injector, Component, ViewChild, AfterViewInit, HostBinding, ElementRef, OnInit, Directive, HostListener, Input, ViewContainerRef } from "@angular/core";
import { AppComponentBase } from "@shared/common/app-component-base";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { LocalStorageService } from "@shared/utils/local-storage.service";
import { Router, ActivatedRoute } from "@angular/router";
import * as moment from 'moment';
import { LocatorServiceProxy, ShippingPackageServiceProxy, LocationServiceProxy,LocationListDto, RouteTypeList } from "@shared/service-proxies/service-proxies";
// import { Select2OptionData } from 'ng2-select2';
import { MapsAPILoader } from "@agm/core";
import { stringify } from "querystring";
import { Options } from "select2";
import { isNull } from "util";
// import { CreatePostalCodesModalComponent } from "@app/sprintship/contact-management/postal-codes/create-or-edit-postalCode-modal.component";
import { TabsetComponent } from "ngx-bootstrap";
import { AppConsts } from "@shared/AppConsts";
import { List } from "lodash";
import { MessageService } from '@abp/message/message.service';

@Component({

    selector: 'mapFlyOutComponent',
    templateUrl: 'map-flyout.component.html',
    animations: [appModuleAnimation()],
    styleUrls: ['map-flyout.component.less'],

})

export class MapFlyOutComponent extends AppComponentBase implements AfterViewInit{

    @HostBinding('id') id = 'kt_quick_sidebar';
    @HostBinding('class')
    classes = 'kt-quick-panel';
    @HostBinding('attr.mQuickSidebarOffcanvas')

    @HostBinding('style.overflow') styleOverflow: any = 'hidden';

    @ViewChild('locatorTab', { static: false }) staticTabs: TabsetComponent;

    markers: marker[] = []; 
    remoteServiceBaseUrl: string = AppConsts.remoteServiceBaseUrl;
    mQuickSidebarOffcanvas: any;
    interval: any;
    reload = false;
    exampleData: Array<Options>;
    routeData: Array<Options> = [];
    holder: Array<Options> = [];
    options: Options ;
    value: string[];
    current: string;
    driverFilter = false;
    driverFilterSel = 2;
    check: Array<any> = [];
    filterSearch:string;
    empty:boolean = true;
    
    deliveryCheck: boolean = true;
    pickupCheck: boolean = true;
    filterDate: any;
    tempLocation: any;
    @Input() filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: moment.Moment;
        endDate: moment.Moment;
    } = <any>{};

    @Input() route: Array<any> = [];
    tempRoute: Array<any> = [];
    data: any = [];
    points: any;
    status: Array<any> = [];
    allStatus: boolean;

    @Input() active: number;
    @Input() activeF: number;
    @Input() activeD: number;
    select: Array<any> = [];
    driver: Array<any> = [];
    locations: any;
    locationsMap: any;
    listpick: Array<any> = [];
    routeType: List<RouteTypeList>;
    @Input() routeSel: Array<any> = [];

    @Input() routeIds: Array<any> = [];
    tempRouteIds: Array<any> = [];
    routeTypeIds: Array<any> = [];
    recenter: number;
    todaysDate: string;
    locationFilter: number;

    @Input() locationName:string;
    locationsFilter: any[];
    data1: any = [];
    tempDate: any;
    constructor(
        private viewContainerRef: ViewContainerRef,
        injector:Injector,
        private el: ElementRef,
        private _locationServiceProxy: LocationServiceProxy,
        private activatedRoute: ActivatedRoute,
        private router:Router,
        private _messageService: MessageService,
        private _locatorAppService: LocatorServiceProxy
    ){
        super(injector)  
    }

    _isOpen: boolean;
    _pinned = false;
    timeId: any;
    track = 0;
    
    ngOnInit(){
        this.timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(this.timeId);

        let that = this;
        this.getLocationsOnLoad().then(function(result){
            that.spinnerService.hide();
        });
     
        if(localStorage.getItem('operatingLocationId')!=null){
            this.filters.locationFilter = parseInt(localStorage.getItem('operatingLocationId'));
        }else{
            this.filters.locationFilter = this.locations[0].id;
        }
        this.driverFilter = undefined;
        if(this.routeIds[0] != 0 && this.routeIds[0] != undefined){
            let todaysTime = new Date().getHours() + ':' + new Date().getMinutes() + ':'+  new Date().getSeconds();
            let storTimestamp = new Date(localStorage.getItem('loadDate') + " " + todaysTime).getTime();
            let storageDate = moment.tz(storTimestamp, this.timeId).format();
            this.filters.startDate = moment(moment(storageDate).format('YYYY-MM-DD'));
            this.filterDate = moment(moment(storageDate).format('YYYY-MM-DD'));
            //this.routeIds.push(this.getParentComponent().routeIds[0]);   
            this.tempDate = this.filters.startDate;
            this.tempRouteIds = this.routeIds;  
            this.tempRoute = this.route; 
            this.tempLocation = this.filters.locationFilter; 
            
        }else{
            let todaysTime = new Date().getHours() + ':' + new Date().getMinutes() + ':'+  new Date().getSeconds();
            let storTimestamp = new Date(localStorage.getItem('loadDate') + " " + todaysTime).getTime();
            let storageDate = moment.tz(storTimestamp, this.timeId).format();
            this.filters.startDate = moment(moment(storageDate).format('YYYY-MM-DD'));
            this.filterDate = moment(moment(storageDate).format('YYYY-MM-DD'));  
            this.tempDate = this.filters.startDate;
            this.tempLocation = this.filters.locationFilter; 
            this.route = [];
            this.routeSel = [];
            this.routeIds = [];
        }

        $("#locationSelectInputMap").val(that.filters.locationFilter);

        $('#locationSelectInputMap').on('change', function(){
            $("#locationSelectInputMap").val($(this).val());
            that.filters.locationFilter = parseInt($("#locationSelectInputMap").val().toString());
        });    
        this.routeClick();

    }   

    getLocationsOnLoad()
    {
        let that = this;
        return new Promise(function(resolve, reject){
            that._locationServiceProxy.getLocationNames(undefined, undefined, undefined, undefined, undefined, undefined)
            .subscribe(result => {
                $('#locationSelectInputMap').select2();
                that.locations = result;
            });
        });
    }



    ngAfterViewInit(): void{
        this.mQuickSidebarOffcanvas = new KTOffcanvas(this.el.nativeElement, {
            overlay: true,
            baseClass: 'kt-quick-panel',
            closeBy: 'getting_started_close',
            toggleBy: 'getting_started_toggle'
        });

        this.mQuickSidebarOffcanvas.events.push({
            name: 'afterHide',
            handler: () => {
                if (this._pinned) {
                    this.mQuickSidebarOffcanvas.show();
                } else {
                    this.isOpen = false;
                }
            }
        }, {
                name: 'afterShow',
                handler: () => {
                    this.isOpen = true;
                }
            });

        if(this.routeIds[0] != 0 && this.routeIds[0] != undefined){
            this.activeD = 1;
            this.plotRouteMarker();
        }else{
            let tmp = [];
            let tmp1 = [];
            this._locatorAppService.getActiveRoutes(moment.tz(this.filterDate, this.timeId),this.getParentComponent().locationId).subscribe(result => {
                result.items.forEach(item => {
                    tmp.push(item.routeId);
                    tmp1.push(item.userId);
                });
                this.activeD = 0;
                this.routeSel = tmp;
                this.routeIds = tmp;
                this.route = tmp1;
                this.tempRouteIds = this.routeIds;  
                this.tempRoute = this.route;  
                this.plotRouteMarker(undefined);
            });
        }


        
        this.getParentComponent().getLocationsOnLoad(this.filters.locationFilter);
    }

    set pinned(newValue: boolean) {
        if (newValue === this._pinned) {
            return; 
        }
        this._pinned = newValue;
    }
    get pinned(): boolean {
        return this._pinned;
    }
    reversePinned(): void {
        this.pinned = !this.pinned;
    }
    set isOpen(newValue: boolean) {
        if (newValue === this._isOpen) {
            return;
        }
        this._isOpen = newValue;
    }
    get isOpen(): boolean {
        return this._isOpen;
    }

    activeDriver(){
        this.route = [];
        this.routeSel = [];
        this.routeIds = [];
        let tmp = [];
        this._locatorAppService.getActiveRoutes(moment.tz(this.filterDate, this.timeId),this.getParentComponent().locationId).subscribe(result => {
            result.items.forEach(item => {
                this.route.push(item.userId);
                tmp.push(item.routeId);
                this.routeIds.push(item.routeId);
                this.activeD = 0;
            });
            this.routeSel = tmp;
        });
        
    }

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

    loadFlyOut(x?): void{
        if(x){
            this.active = 1;
            this.activeD = 0;
            this.activeF = 1;
        }
        
        this.options = {
            width: '300',
            multiple: true,
            tags: true
        };
        
    }

    routeClick(){
        this.active = 1;
        this._locatorAppService.getDriverFilter(
            moment.utc(this.filters.startDate.toDate().toDateString()),
            moment.utc(this.filters.startDate.toDate().toDateString()),
            this.filters.locationFilter,
            undefined,
            undefined,
            this.routeIds,
            this.empty,
            undefined,
            this.driverFilter)
        .subscribe((result)=>{
            result.items.forEach(r => {
                r.color = this.getRandomColor();
            });
            this.data = this.data1 = result.items;
            this.filterSearch = '';
        });
    }

    selectAll() {
            this.route = this.data.map(x => x.userId);
            this.routeIds = this.data.map(x => x.routeId);
            this.routeSel = this.data.map(x => x.routeId);
            this.getParentComponent().cd.detectChanges();
    }

    unselectAll() {
        this.getParentComponent().markers = [];
        this.getParentComponent().latestLog = [];
        this.getParentComponent().delmarkers = [];
        this.getParentComponent().driverP = [];
        this.route = [];
        this.routeSel = [];
        this.routeIds = [];
        this.driver = [];
        this.activeF = 1;
        this.activeD = 0;
        
        this.getParentComponent().cd.detectChanges();
    }
    
    clearAll() {
        this.getParentComponent().markers = [];
        this.getParentComponent().latestLog = [];
        this.getParentComponent().delmarkers = [];
        this.getParentComponent().driverP = [];
        // this.route = [];
        // this.routeSel = [];
        // this.routeIds = [];
        this.driver = [];
        this.activeF = 1;
        this.activeD = 0;
        
        this.getParentComponent().cd.detectChanges();
    }

    addRoute(data,event){

        if(event.target.checked){
           // if(data.userId != 0 && data.userId != undefined){
                this.route.push(data.userId);
            //}
            this.routeIds.push(data.routeId);

        }else{       
            const index = this.routeIds.indexOf(data.routeId, 0);
            if (index > -1) {
                this.routeIds.splice(index, 1);
            }

            if(data.userId == undefined || data.userId == 0){
                const index1 = this.route.indexOf(0, 0);
                if (index1 > -1) {
                    this.route.splice(index1, 1);
                }
            }else{
                const index1 = this.route.indexOf(data.userId, 0);
                if (index1 > -1) {
                    this.route.splice(index1, 1);
                }
            }
        }
    }

    applyFilter(event){
        let filterValueLower = event.target.value;
        if(filterValueLower === '' || filterValueLower === undefined ) {
            this.data = this.data1;
        } 
        else 
        {
          this.data = this.data1.filter((d) => d.searchTerm.includes(filterValueLower))
        }
    }
    
    removeRoute(event){
        
        const index2 = this.routeSel.indexOf(event.value.routeId, 0);
        if (index2 > -1) {
            this.routeSel.splice(index2, 1);
        }
        const index = this.routeIds.indexOf(event.value.routeId, 0);
        if (index > -1) {
            this.routeIds.splice(index, 1);
        }
        const index1 = this.route.indexOf(event.value.userId, 0);
        if (index1 > -1) {
            this.route.splice(index1, 1);
        }
        
        this.getParentComponent().cd.detectChanges();
    }
    
    trackOnChange(value) {
        this.track = value;
    }

    plotRouteMarker(reload?, clicked?){
        this.tempRouteIds = []
        this.tempRoute = []
        this.activeD = 0;
        if(this.track == 1){

        }
        if(this.track == 2){
            this.activeD = 1;
        }
        this.getParentComponent().getOption(1);
        this.getParentComponent().markers = [];
        this.getParentComponent().latestLog = [];
        this.getParentComponent().delmarkers = [];
        this.getParentComponent().driverP = [];
        this.getParentComponent().idle = [];
        //this.getParentComponent().mapReady(this.getParentComponent().map);
        if(reload != undefined){
            this.getParentComponent().reload = false;
            this.reload = true;
        }else{
            this.reload = false;
        }

        var bounds = new google.maps.LatLngBounds();
        var color = '';
        this.getParentComponent().loaded1 = false;
        this.getParentComponent().loaded2 = false;
        this.route = this.route.map(function(val, i) {
            return val === null ? 0 : val;
        });
        if(this.route.length != 0){
            if(this.reload == false){
                this.spinnerService.show();
            }
            this._locatorAppService.getVehicleDestinationPoints(moment.tz(this.filterDate, this.timeId),moment.tz(this.filterDate, this.timeId),this.filters.locationFilter,undefined,this.routeTypeIds,this.routeIds,true,undefined,this.driverFilter)
            .subscribe((result)=>{
                this.points = result.items;
                let geocodearray1 = Array<any>();
                let geocodearray = Array<any>();
                let sortlabel = [];
                this.markers = [];
                this.points.forEach(item => {
                    if(sortlabel[item.routeId] == undefined){
                        sortlabel[item.routeId] = 0;
                    }
                    
                    if(this.deliveryCheck){
                        sortlabel[item.routeId] ++;
                        this.markers.push(
                            {
                                lat: item.deliveryLatitude,
                                lng: item.deliveryLongtitude,
                                label: sortlabel[item.routeId]+"",
                                draggable: false,
                                // pin: pin,
                                driverName: item.driverName,
                                orderId: item.orderId,
                                eta: item.eta,
                                color: item.color,
                                companyName: item.pickUpCompanyName,
                                geocode: item.deliveryGeoCodeId,
                                vehicleColor: this.getDefaultColor(item.routeId) == null ? item.vehicleColor : this.getDefaultColor(item.routeId),
                                statusCode: item.statusCode,
                                statusTime: item.statusTime,
                                statusDescription: item.statusDescription,
                                deliveryTime: item.deliveryTime,
                                completion: item.completionTime,
                                routeId: item.routeId,
                                count: this.points.filter(p=>p.deliveryLatitude == item.deliveryLatitude && p.deliveryLongtitude == item.deliveryLongtitude).length > 1 ?  
                                    this.points.filter(p=>p.deliveryLatitude == item.deliveryLatitude && p.deliveryLongtitude == item.deliveryLongtitude).length : 1
                            });
                        let that = item;
                        bounds.extend(new google.maps.LatLng({lat: that.deliveryLatitude, lng: that.deliveryLongtitude}));
                        
                    }

                    if(this.pickupCheck){
                        if(geocodearray.indexOf(item.pickUpGeoCodeId) !== -1) {

                        }else{
                            this.getParentComponent().markers.push(
                                {
                                    lat: item.pickUpLatitude,
                                    lng: item.pickUpLongtitude,
                                    label: item.orderId+"",
                                    draggable: false,
                                    // pin: pin,
                                    driverName: item.driverName,
                                    orderId: item.orderId,
                                    eta: moment(item.eta).toString(),
                                    color: item.color,
                                    companyName: item.destinationAddress,
                                    geocode: item.pickUpGeoCodeId
                                });
                                
                            let that = item;
                            bounds.extend(new google.maps.LatLng({lat: that.pickUpLatitude, lng: that.pickUpLongtitude}));
                        }
                        geocodearray.push(item.pickUpGeoCodeId);
                        
                    }
                    this.getParentComponent().loaded1 = true;
                });
                this.getParentComponent().delmarkers = this.markers;
                if(this.reload == false){
                    this.getParentComponent().map.fitBounds(bounds);
                }
                if(this.reload == false){
                    this.spinnerService.hide();
                } 
            })
        }
        else{
            if(clicked){
                this.message.info('No Driver/Stop selected');
            }
        }

        if(this.activeF == 1){
            if(this.route.length != 0){
                let user = [];
                let userId = 0;
                if(this.reload == false){
                    this.spinnerService.show();
                }
                this._locatorAppService.getVehicleLatestLocation(moment.tz(this.filterDate, this.timeId),moment.tz(this.filterDate, this.timeId),this.filters.locationFilter,undefined,undefined,this.routeIds,true,undefined,this.driverFilter)
                .subscribe((result)=>{
                    this.points = result.items;
                    this.points.forEach(item => {
                        if(item.userId in user){
                            user[item.userId] = user[item.userId] + 1;
                        }else{
                            user[item.userId] =  1;
                        }
                        this.getParentComponent().latestLog.push(
                            {
                                lat: item.latitude,
                                lng: item.longtitude,
                                label: user[item.userId].toString(),
                                draggable: false,
                                driverName: item.driverName,
                                orderId: item.orderId,
                                eta: moment(item.timeStamp).toString(),
                                color: item.color
                            });
                            
                        let that = item;
                    });
                    
                    if(this.reload == false){
                        // this.getParentComponent().map.fitBounds(bounds);
                    }
                    if(this.reload == false){
                        this.spinnerService.hide();
                    }
                    this.getParentComponent().loaded2 = true;
                })
            }
        }

        if(this.activeD == 1){
            if(this.route.length == 1 ){
                let user = [];
                let userId = 0;
                if(this.reload == false){
                    this.spinnerService.show();
                }
                this.getParentComponent().showMarkers = false;
                this._locatorAppService.getVehicleLocationLog(moment.tz(this.filterDate, this.timeId),moment.tz(this.filterDate, this.timeId),this.filters.locationFilter,undefined,undefined,this.routeIds,true,undefined,this.driverFilter)
                .subscribe((result)=>{
                    this.points = result.items;
                    this.points.forEach(item => {
                        
                        if(item.userId in user){
                            user[item.userId] = user[item.userId] + 1;
                        }else{
                            user[item.userId] =  1;
                        }

                        this.getParentComponent().driverP.push(
                            {
                                lat: item.latitude,
                                lng: item.longtitude,
                                label: user[item.userId].toString(),
                                draggable: false,
                                // pin: pin,
                                driverName: item.driverName,
                                orderId: item.orderId,
                                eta: moment(item.timeStamp).toString(),
                                color: item.color
                            });
                            
                        let that = item;
                    });
                    this.getParentComponent().showMarkers = true;
                    if(this.reload == false){
                        // this.getParentComponent().map.fitBounds(bounds);
                    }
                    if(this.reload == false){
                        this.spinnerService.hide();
                    }
                })
            }
            else
            {
                this._messageService.info('Breadcrumbs view is only applicable to a single selected route. Please only select one driver from the list if you wish to view this option.');
            }
        }
        if(this.track == 1){
            if(this.route.length != 0){
                let user = [];
                let userId = 0;
                if(this.reload == false){
                    this.spinnerService.show();
                }
                this.getParentComponent().showMarkers = false;
                this._locatorAppService.getAllVehicleIdle(moment.tz(this.filterDate, this.timeId),moment.tz(this.filterDate, this.timeId),this.filters.locationFilter,undefined,undefined,this.routeIds,true,5,this.driverFilter)
                .subscribe((result)=>{
                    this.points = result.items;
                    this.points.forEach(item => {
                        
                        if(item.userId in user){
                            user[item.userId] = user[item.userId] + 1;
                        }else{
                            user[item.userId] =  1;
                        }

                        this.getParentComponent().idle.push(
                            {
                                lat: item.latitude,
                                lng: item.longtitude,
                                label: user[item.userId].toString(),
                                draggable: false,
                                // pin: pin,
                                driverName: item.driverName,
                                orderId: item.orderId,
                                eta: moment(item.timeStamp).toString(),
                                color: item.color
                            });
                            
                        let that = item;
                    });
                    this.getParentComponent().showMarkers = true;
                    if(this.reload == false){
                        // this.getParentComponent().map.fitBounds(bounds);
                    }
                    if(this.reload == false){
                        this.spinnerService.hide();
                    }
                })
            }
        }
        
        let that = this;
        
        this.getParentComponent().cd.detectChanges();
        
        if(this.reload == false){
            clearInterval(that.interval);
        }
        this.tempRouteIds = this.routeIds;  
        this.tempRoute = this.route; 
    }

    plotDriverMarker(){
        if(this.activeD == 1){
            this.activeD = 0;
        }else{
            this.activeD = 1;
        }
    }
    
    ngOnDestroy() {
        let that = this;
        clearInterval(that.interval);
    }
    driverFilterOnChange(value){
        if(value == 1){
            this.driverFilter = true;
            this.empty = true;
        }
        if(value == 2){
            this.driverFilter = undefined;
            this.empty = true;
        }
        if(value == 3){
            this.empty = false;
            this.driverFilter = undefined;
        }
    }
    loadData(): void{     
        this.unselectAll();
        this.filterDate =  moment.utc(this.filters.startDate.toDate().toDateString()).format('YYYY-MM-DD');
        let tempD =  moment(this.tempDate).format('YYYY-MM-DD');
        if(tempD != this.filterDate || this.tempLocation != this.filters.locationFilter){   
            this.tempRouteIds = [];  
            this.tempRoute = []; 
            this.tempDate = this.filters.startDate;
            this.tempLocation = this.filters.locationFilter;
        }
        this._locatorAppService.getDriverFilter(moment.utc(this.filters.startDate.toDate().toDateString()),moment.utc(this.filters.startDate.toDate().toDateString()),this.filters.locationFilter,undefined,undefined,undefined,this.empty,undefined,this.driverFilter)
        .subscribe((result)=>{
            this.driver = [];
            result.items.forEach(value => {
                const index = this.tempRouteIds.indexOf(value.routeId, 0);
                if(index > -1){
                    this.check[value.routeId] = true;
                }else{
                    this.check[value.routeId] = false;
                }
                value.color = this.getRandomColor();
            });
            this.routeIds = this.tempRouteIds;
            this.route = this.tempRoute; 
            this.data = this.data1 = result.items;
            this.filterSearch = '';
            this.plotRouteMarker();
            
        });     
        
        this.getParentComponent().getLocationsOnLoad(this.filters.locationFilter);
        this.staticTabs.tabs[1].disabled = false;
        this.staticTabs.tabs[1].active = true
              
    }
    checkAll(event){  
        this.data.forEach(value => {
            this.addRoute(value, event);
                
            if(event.target.checked){
                this.check[value.routeId] = true;
            }else{
                this.check[value.routeId] = false;
            }
        });
    }

    getDefaultColor(routeId) {
        var index = this.data.findIndex(d => d.routeId == routeId);
        if (index != -1){
            return this.data.find(d => d.routeId == routeId).color;
        }
        return null;
    }

    getRandomColor() {
        var color = "#" + ((1<<24)*Math.random() | 0).toString(16)
        return color;
    }

}


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;
    completion?:string;
    count?:number;
    routeId?: number;
}