import { Component, ViewEncapsulation, Injector, OnInit, DoCheck, ViewChild, Input, AfterViewInit,ViewContainerRef, ChangeDetectorRef, EventEmitter, Output } 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, RouteBuilderServiceProxy, ListResultDtoOfOrganizationUnitDto, OrganizationUnitServiceProxy, RouteBuilderRouteIdOutput, UpdateRouteByBuilderInput } 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 { AppSessionService } from "@shared/common/session/app-session.service";
import { ArrayToTreeConverterService } from "@shared/utils/array-to-tree-converter.service";
import { TreeNode, MenuItem } from "primeng/api";
import { TreeDataHelperService } from "@shared/utils/tree-data-helper.service";
import { ILatLng } from "../fleet-management/driver-proximities/driver-proximities.directive";
import { UpdateEtaRouteBuilder } from "./update-eta..component";
//import { UpdateGeoCodeModalComponent } from "./update-geocode.component";

declare var $: any;

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

export class RouteBuilderComponent extends AppComponentBase implements OnInit, AfterViewInit{

    treeData: any;
    selectedOu: TreeNode;
    ouContextMenuItems: MenuItem[];

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

    zoom: number = 14;
    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;
    
    @ViewChild('laboratoryMapFlyOutComponent', {static: false}) laboratoryMapFlyOutComponent: LaboratoryMapFlyOutComponent;
    @ViewChild('mapFlyOutComponent', {static: false}) mapFlyOutComponent: MapFlyOutComponent;
    @Output() refresh: EventEmitter<any> = new EventEmitter<any>();
    @ViewChild('UpdateEtaRouteBuilder', { static: false }) UpdateEtaRouteBuilder: UpdateEtaRouteBuilder;
    
    routeId: any;
    data: any;
    
    displayDirections = true;
    origin: ILatLng;
    destination: ILatLng;
    waypoint:Array<ILatLng> = [];
    dataUp: any;
    availableRoute: any; 

    routeLabel: string;
    routeDateLabel: any;

    locationId: number;
    routeDate: string;
    routeIdA: number;
    orderList: Array<number> = [];
    orderToUp: number;
    templateToUp: number;
    destinationId: number;
    eta: number;
    past: boolean;

    constructor(
        injector: Injector,
        private router: Router,
        private _locationServiceProxy: LocationServiceProxy,
        private activatedRoute: ActivatedRoute,
        private _locatorAppService: LocatorServiceProxy,
        private viewContainerRef: ViewContainerRef,
        private _location: Location,
        private _routeBuilderAppService: RouteBuilderServiceProxy,
        private _arrayToTreeConverterService: ArrayToTreeConverterService,
        private _organizationUnitService: OrganizationUnitServiceProxy,
        private _treeDataHelperService: TreeDataHelperService
    ) {
        super(injector);
        if(abp.auth.isGranted('Pages.Shipping.Locator') === false)
        {
           this._location.back();
        }
        this.laboratoryMapFeatureEdition = abp.features.isEnabled('App.LaboratoryMapFilter');
    }


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

    ngOnInit(): void {

        this.activatedRoute.paramMap.subscribe(params => {
            this.routeId = params.get("routeid");
        });
        this.getDetails();

    }

    getDetails(){
        this.dataUp = [];
        this.waypoint = [];
        this.orderList = [];
        this._routeBuilderAppService.getRouteForRouteBuilder(this.routeId)
        .subscribe(result => {
            this.routeDateLabel = result.routeDate;
            this.routeLabel = result.route;
            this.data = result.routeOrder;

            this.locationId = result.locationId;
            this.routeIdA = result.routeId;
            this.routeDate = result.routeDate.toString();
            this.past = result.routeOrder[0].pastDate;
            this.origin = {
                latitude: result.routeOrder[0].latitude,
                longitude: result.routeOrder[0].longitude
              }
            this.destination = {
                latitude: result.routeOrder[result.routeOrder.length - 1].latitude,
                longitude: result.routeOrder[result.routeOrder.length - 1].longitude
            }
            this.data.forEach(d => {
                let dt = {
                    latitude: d.latitude,
                    longitude: d.longitude
                };
                if(!d.start){
                    this.waypoint.push(dt);
                }
            });
            this.dataUp = this.data;
            this.primengTableHelper.totalRecordsCount = result.routeOrder.length;
            this.primengTableHelper.records = result.routeOrder;
        });
    }


    ngAfterViewInit(): void {

    }

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

    rowReorder(event){
        this.data = [];
        for (let index = 0; index < this.primengTableHelper.records.length; index++) {
            var element = this.primengTableHelper.records[index];
            this.data.push(element);
        }
        this.dataUp = this.data;
    }

    saveOptimize(){
        this.spinnerService.show();
        let input = new UpdateRouteByBuilderInput();
        input.routeOrder = this.dataUp;
        this._routeBuilderAppService.buildRoute(input)
        .subscribe(r=>{
            this.getDetails();
            this.spinnerService.hide();
            this.notify.info(this.l('SavedSuccessfully'));
        });
    }

    etaLock(i,b){
        this.primengTableHelper.records[i].lockEta = b;
    }
    
    updateEta(record){
        this.UpdateEtaRouteBuilder.show(record.destinationDetailsId, this.locationId,record.etaString, record.addressId, record.latitude, record.longitude);
    }

    checkData(event, record){
        if(record.start)
        {
            if(event.target.checked){
                this.templateToUp = record.routeTemplateId;
            }else{
                this.templateToUp = undefined;
            }
        }
        else if(record.end)
        {
            if(event.target.checked){
                this.templateToUp = record.routeTemplateId;
            }else{
                this.templateToUp = undefined;
            }
        }
        else
        {
            if(event.target.checked){
                this.orderList.push(record.orderId);
                this.destinationId = record.destinationDetailsId;
                this.eta = record.etaString;
            }else{
                const index = this.orderList.indexOf(record.orderId, 0);
                if (index > -1) {
                    this.orderList.splice(index, 1);
                }
                this.orderToUp = undefined;
                this.destinationId = undefined;
                this.eta = undefined;
            }
        }
    }
}

// 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;
}