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 } from "@angular/router";
import * as moment from 'moment';
import { ControllerVehicleLocationServiceProxy } from "@shared/service-proxies/service-proxies";
import { MapComponent } from "../../map/map.component";
import { MapsAPILoader } from "@agm/core";
import { stringify } from "querystring";

@Component({

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

})

export class MapFlyOutComponent extends AppComponentBase implements OnInit, AfterViewInit{

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

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

    mQuickSidebarOffcanvas: any;

    
    @Input() filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: moment.Moment;
        endDate: moment.Moment;
    } = <any>{};
    route: Array<any> = [];
    data: any;
    points: any;
    status: Array<any> = [];
    allStatus: boolean;
    constructor(
        private viewContainerRef: ViewContainerRef,
        injector:Injector,
        private _localStorageService: LocalStorageService,
        private el: ElementRef,
        private router:Router,
        private _controllerVehicleLocationAppService: ControllerVehicleLocationServiceProxy,
    ){
        super(injector)  
    }

    getRandomColor2() {
        var length = 6;
        var chars = '0123456789ABCDEF';
        var hex = '#';
        while(length--) hex += chars[(Math.random() * 16) | 0];
        
        return hex;
    }
    getParentComponent() {
        return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component
    }
    _isOpen: boolean;
    _pinned = false;
    
    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;
    }

    ngOnInit(): void{
        
        this._controllerVehicleLocationAppService.getVehicleLocation(moment(this.filters.startDate),moment(this.filters.endDate),this.filters.locationFilter,undefined,undefined,undefined)
        .subscribe((result)=>{
            this.data = result.items;
            this.data.forEach(item => {
                item.color = this.getRandomColor2();
            })
        })
        
    }
    
    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;
                }
            });
            
    }

    // addPoints(route?:number,color?:string){ 
    //     this.status = []; 
    //     this.allStatus = false;
    //     this.status[route] = true;
    //     this.spinnerService.show();
    //     this.route = [];
    //     this.route.push(route);
    //     this._controllerVehicleLocationAppService.getVehicleDestinationPoints(undefined,undefined,undefined,undefined,undefined,this.route)
    //     .subscribe((result)=>{
    //         this.getParentComponent().markers = [];
    //         this.points = result.items;
    //         this.points.forEach(item => {
    //             var pin = {
    //                 path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    //                 fillColor: color,
    //                 fillOpacity: 1,
    //                 strokeColor: '#000',
    //                 strokeWeight: 1,
    //                 scale: 1,
    //                 labelOrigin: { x: 0, y: -30 }};

    //             this.getParentComponent().markers.push(
    //                 {
    //                     lat: item.latitude,
    //                     lng: item.longtitude,
    //                     label: item.orderId+"",
    //                     draggable: false,
    //                     pin: pin,
    //                     driverName: item.driverName,
    //                     orderId: item.orderId,
    //                     eta: moment(item.eta).toString()
    //                 });
    //         });
            
    //         this.spinnerService.hide();
    //     })
    // }
    
    // addPointsAll(){ 
    //     this.status = []; 
    //     this.allStatus = true;
    //     var color = '';
    //     this.spinnerService.show();
    //     this.data.forEach(key => {
    //         this.route.push(key.routeId);
    //     });
        
    //     this._controllerVehicleLocationAppService.getVehicleDestinationPoints(undefined,undefined,undefined,undefined,undefined,this.route)
    //     .subscribe((result)=>{
            
    //         this.getParentComponent().markers = [];
    //         this.points = result.items;
    //         this.points.forEach(item => {
    //             this.data.forEach(key => {
    //                 if(key.routeId == item.routeId){
    //                     color = key.color;
    //                 };
    //             });
    //             var pin = {
    //                 path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    //                 fillColor: color,
    //                 fillOpacity: 1,
    //                 strokeColor: '#000',
    //                 strokeWeight: 1,
    //                 scale: 1,
    //                 labelOrigin: { x: 0, y: -30 }};

    //             this.getParentComponent().markers.push(
    //                 {
    //                     lat: item.latitude,
    //                     lng: item.longtitude,
    //                     label: item.orderId+"",
    //                     draggable: false,
    //                     pin: pin,
    //                     driverName: item.driverName,
    //                     orderId: item.orderId,
    //                     eta: moment(item.eta).toString()
    //                 });
    //         });
            
    //         this.spinnerService.hide();
    //     })
        
    // }


}