import { Component, Injector, ViewChild, ViewEncapsulation, OnInit, DoCheck, Input, AfterViewInit } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { OrderServiceProxy, OrderListDto, OrderStatusAttachmentServiceProxy,  ControllerRouteDetailServiceProxy, GetOrderDetailsView } from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { finalize } from 'rxjs/operators';
import { ActivatedRoute, Router } from '@angular/router';
// import { OrderAttachment } from './order-attachments.component';
// import { EditOrderContactDetailModalComponent } from './edit-order-contact-detail-modal.component';
import * as moment from 'moment-timezone';
// import { AddOrderStatusModalComponent } from '../order-status/add-order-status-modal.component';
import { DomSanitizer } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { OrderAttachment } from '@app/sprintship/controller/order-detail/order-attachments.component';
import { AddOrderStatusModalComponent } from '@app/sprintship/controller/order-status/add-order-status-modal.component';
import { EditOrderContactDetailModalComponent } from '@app/sprintship/controller/order-detail/edit-order-contact-detail-modal.component';
import { EntityTypeHistoryModalComponent } from '@app/shared/common/entityHistory/entity-type-history-modal.component';
import { AppConsts } from '@shared/AppConsts';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { DomHelper } from '@shared/helpers/DomHelper';
import { AbpSessionService } from 'abp-ng2-module/dist/src/session/abp-session.service';
import { AbpMultiTenancyService } from 'abp-ng2-module/dist/src/multi-tenancy/abp-multi-tenancy.service';
declare var $: any;
declare var jquery: any;
@Component({
    templateUrl: './tracking-page-order-detail.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./tracking-page-order-detail.component.less']
})
export class TrackingPageOrderDetailComponent extends AppComponentBase implements OnInit {
    cssTrigger = false
    remoteServiceBaseUrl: string = AppConsts.remoteServiceBaseUrl
    zoom: number = 50;
    // initial center position for the map
    lat: number = 34.044971;
    lng: number = -118.291243;
    map: any;
    image: Array<{ src: string, caption: any, thumb: string }> = new Array();
    orderNumber: string;
    trackingId: string;
    @ViewChild('dataTable', { static: true }) dataTable: Table;
    @ViewChild('paginator', { static: true }) paginator: Paginator;
    @ViewChild('orderAttachment', { static: true }) orderAttachment: OrderAttachment;
    @ViewChild('addOrderStatusModal', { static: false }) addOrderStatusModal: AddOrderStatusModalComponent;
    @ViewChild('editOrderContactDetailModal', { static: true }) editOrderContactDetailModal: EditOrderContactDetailModalComponent;
    @ViewChild('entityTypeHistoryModal', { static: true }) entityTypeHistoryModal: EntityTypeHistoryModalComponent;
    _entityTypeFullName = 'SprintTek.Shipping.Orders.Order';
    entityHistoryEnabled = false;
    //Filters
    filterText = '';
    id: any;
    _isLab: any;
    _isFbx: any;
    _ukLocale: any;
    orderStatusLat: any
    orderStatusLong: any

    type = "orders"
    sampleDate: any

    deliveryDate: any;
    deliveryTime: any;
    pickupTime: any;
    pickupDate: any;
    createdDate:any;
    modifiedDate:any;

    collectionsLatLongCode: Array<{
        lat: any;
        long: any;
    }> = new Array<any>()

    statusIndex : any
    timeId: any
    collectionsCode: Array<any> = new Array<any>();
    saving: boolean
    vehicleName: string;
    routeCode: string;
    routeId: number;
    locationName: string;
    loadDate: string;
    track:string;
    onLoadTimeZone:string;
    tracking:string;
    clinicId:number;
    sourceChecker:boolean = false;
    sourceCheckerMF:boolean = false;
    sourceCheckerFFF:boolean = false;
    // destination: ILatLng = {
    //     latitude: 33.7078868,
    //     longitude: -117.9314313
    //   };

    //   waypoints: Array<ILatLng> = new Array<ILatLng>()


    //   origin: ILatLng = {
    //     latitude: 39.208974,
    //     longitude: -121.073627
    //   };

    orderDetails: GetOrderDetailsView = new GetOrderDetailsView();
    orderType
    isHost = false;
    isMultiTenancyEnabled = false;
    shownLoginName = '';
    tenancyName = '';
    userName = '';
    constructor(
        injector: Injector,
        private _orderAppService: OrderServiceProxy,
        private _attachmentService: OrderStatusAttachmentServiceProxy,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _abpSessionService: AbpSessionService,
        private _abpMultiTenancyService: AbpMultiTenancyService,
        public sanitizer: DomSanitizer,
        private _router: Router,
        private route: ActivatedRoute,
        private _location: Location,
        private router: Router
    ) {
        super(injector);
        
    }


    ngOnInit() {
        // this.setIsEntityHistoryEnabled();
        this.timeId = localStorage.getItem('timeZoneId');
        // moment.tz.setDefault(this.timeId);
        this._isLab = abp.features.isEnabled('App.RouteDetails');
        this._isFbx = abp.features.isEnabled('App.FBXFeature');
        this._ukLocale = abp.features.isEnabled('App.DateFormatFeature.UKLocale');
        var element = document.querySelectorAll('.kt-login__aside')
        element[0].classList.add('b-none');

        this.isHost = !this._abpSessionService.tenantId;
        this.isMultiTenancyEnabled = this._abpMultiTenancyService.isEnabled;

        // if(this._ukLocale){
        //     console.log("ukLocale")
        // }

        this.route.paramMap.subscribe(params => {
            this.id = params.get("id")
        })
        this.route.paramMap.subscribe(params => {
            this.track = params.get("track")
        })
        this.route.paramMap.subscribe(params => {
            this.tracking = params.get("tracking")
        })

        // if(this.track != null){
        //     this._orderAppService.getOrderRouteLocation(this.id)
        //                      .subscribe(result => {
        //                         this.onLoadTimeZone = result
        //                         var element = document.querySelectorAll('.kt-login__aside')
        //                         element[0].classList.add('w-adjust');
        //                      })
        // }
        
        // this.onLoadTimeZone = "Pacific Standard Timezone"
        this._orderAppService.trackOrder(
            this.id != null ? this.id : undefined,
            this.tracking !=null ? this.tracking : undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined
        ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
            this.orderType= result[0]["orderType"]
            this.orderDetails = result[0];
            this.sourceChecker = result[0].sourceChecker;
            this.sourceCheckerMF = result[0].sourceCheckerMF;
            this.sourceCheckerFFF = result[0].sourceCheckerFFF;
            this.id = this.orderDetails.id
            // image
        // this.image = []
        // this._attachmentService.getOrderStatusAttachmentList(this.orderDetails.id,undefined)
        // // this.track != null ? this.onLoadTimeZone : localStorage.getItem('timeZone')
        //     .pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
        //         for (let index = 0; index < result.length; index++) {
        //             this._attachmentService.getImageIdInternal(result[index].binaryObjectId).subscribe(image => {

        //                 // console.log(this.sanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,'+images.pictureString));
        //                 this.image.push({ src: 'data:image/jpeg;base64,' + image.pictureString, thumb: 'data:image/jpeg;base64,' + image.pictureString, caption:result[index].deviceTime.utcOffset(moment.parseZone(result[index].deviceTime).utcOffset()).format('LLL') });
        //             });
        //         }
        //     });
        this._attachmentService.getOrderStatusPhotos(this.orderDetails.id)
                .pipe(finalize(() => this.spinnerService.hide()))
                .subscribe(result => {
                    result.items.forEach((image, index)=> {
                        let x = false
                        if(result.items[index].fileName.indexOf("blind_count") !== -1){
                            x = true
                        }
                        else {
                            x= false
                        }
                        this.image.push({ 
                            src: 'data:image/jpeg;base64,' + image.content, 
                            thumb: 'data:image/jpeg;base64,' + image.content, 
                            caption: result.items[index].deviceTime.utcOffset(moment.parseZone(result.items[index].deviceTime).utcOffset()).format('LLL') 
                            +(x == true ? "-"+" Blind Count" : "")
                        })
                        
                    });
                });
            if (this._isLab) {
                this.lat = result[0].pickupLat;
                this.lng = result[0].pickupLong;
            }
            else {
                this.lat = result[0].deliveryLat;
                this.lng = result[0].deliveryLong;
            }
            // this.pickupTime = this.orderDetails.pickupTime.utcOffset(moment.parseZone(this.orderDetails.pickupTime).utcOffset()).format('LT');
            if(this._ukLocale){
                this.pickupTime = this.orderDetails.pickupTime.utcOffset(moment.parseZone(this.orderDetails.pickupTime).utcOffset()).format('DD/MM/YYYY h:mm A');
            }
            else{
                this.pickupTime = this.orderDetails.pickupTime.utcOffset(moment.parseZone(this.orderDetails.pickupTime).utcOffset()).format('MM/DD/YYYY h:mm A');
            }
            
            this.pickupDate = localStorage.getItem('loadDate');
            
            if(this._ukLocale){
                this.deliveryTime =this.orderDetails.deliveryTime == null ? "" : this.orderDetails.deliveryTime.utcOffset(moment.parseZone(this.orderDetails.deliveryTime).utcOffset()).format('DD/MM/YYYY h:mm A');
                // console.log(this.deliveryTime)
                this.createdDate = this.orderDetails.createdDate.utcOffset(moment.parseZone(this.orderDetails.createdDate).utcOffset()).format('DD/MM/YYYY h:mm A');
                this.modifiedDate = this.orderDetails.modifiedDate == null ? "" : this.orderDetails.modifiedDate.utcOffset(moment.parseZone(this.orderDetails.modifiedDate).utcOffset()).format('DD/MM/YYYY h:mm A');
            }
            else{
                this.deliveryTime =this.orderDetails.deliveryTime == null ? "" : this.orderDetails.deliveryTime.utcOffset(moment.parseZone(this.orderDetails.deliveryTime).utcOffset()).format('MM/DD/YYYY h:mm A');
                this.createdDate = this.orderDetails.createdDate.utcOffset(moment.parseZone(this.orderDetails.createdDate).utcOffset()).format('MM/DD/YYYY h:mm A');
                this.modifiedDate = this.orderDetails.modifiedDate == null ? "" : this.orderDetails.modifiedDate.utcOffset(moment.parseZone(this.orderDetails.modifiedDate).utcOffset()).format('MM/DD/YYYY h:mm A');
            }
            
            this.pickupDate = localStorage.getItem('loadDate');

           
            result[0].orderTags.forEach(element => {
                if (element.tag.tagType.name == "Order Number") {
                    this.orderNumber = element.tag.name
                }

                if (element.tag.tagType.name == "Tracking Identifier") {
                    this.trackingId = element.tag.name
                }
            });
            // if(this.track == null){
            //     this.getDetails(result.routeId)
            // }
            // else{
                
            // }
            
        });

        
        // if(this._isLab){
        //     this._orderAppService.getClinicSchedule(this.id
        //         ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
        //             this.clinicId = result.clinicId;
        //         });
        // }
        
    }

    // private setIsEntityHistoryEnabled(): void {
    //     let customSettings = (abp as any).custom;
    //     this.entityHistoryEnabled = customSettings.EntityHistory && customSettings.EntityHistory.isEnabled && _.filter(customSettings.EntityHistory.enabledEntities, entityType => entityType === this._entityTypeFullName).length === 1;
    // }

    // showHistory(role: OrderListForView): void {
    //     this.entityTypeHistoryModal.show({
    //         entityId: role.id.toString(),
    //         entityTypeFullName: this._entityTypeFullName,
    //         entityTypeDescription: "Order Details - " +this._isLab ? role.pickupFirstName +" " +role.pickupLastName : role.deliveryFirstName +" " +role.deliveryLastName
    //     });
    // }

    mapReady(event?: any) {
        this.map = event;
    }
    
    getDetails(routeId) {
        this._controllerRouteDetails.getControllerRouteDetail(routeId)
            .subscribe(result => {
                this.routeCode = result.routeTemplate.name;
                this.locationName = result.location.name;
                if (result.vehicle) {
                    this.vehicleName = result.vehicle.user.name + " " + result.vehicle.user.surname;
                }

                this.loadDate = localStorage.getItem('loadDate');
            });
    }

    // activateProximity(id: number, 
    //                   name : string, 
    //                   surname : string, 
    //                   long : number, 
    //                   lat : number,
    //                   addressId : number, 
    //                   geocodeId : number ): void {
    //     this.message.confirm(
    //         this.l("ActivateProximityPrompt",[name,"",long,lat]),
    //         '',// this.l("ActivateProximity"),
    //         (isConfirmed) => {
    //             if (isConfirmed) {
    //                 this.saving = true
    //                 var data = new AddressIdInput;
    //                 data.geocodeId = geocodeId;
    //                 data.id = addressId;
    //                 data.orderId = id;
    //                 this._controllerRouteDetails.updateClinicGeocode(data)
    //                     .pipe(finalize(() => { this.saving = false; }))
    //                     .subscribe(() => {
    //                         this.ngOnInit();
    //                         this.notify.info(this.l('SavedSuccessfully'));
    //                     });
    //             }
    //         }
    //     );
    // }


    // logLong(long){
    //     this.orderStatusLong = long
    //     console.log("loglong"+this.orderStatusLong)
    // }

    // logLat(lat){
    //     this.orderStatusLat = lat
    //     console.log("loglat"+this.orderStatusLat)
    // }

    collectedLatLongCode(collectionLatLongCode) {
        this.collectionsLatLongCode = collectionLatLongCode
        // console.log(this.collectionsLatLongCode)
    }

    catchzIndex(index){
        this.statusIndex = index;
        // console.log(index)
    }

    // collectedCode(collectionCode){
    //     this.collectionsCode = collectionCode
    //     console.log(this.collectionsCode)
    // }

    addOrderStatusModalShow() {
        this.addOrderStatusModal.show()
    }

    goBack() {
        // this._location.back();
        var element = document.querySelectorAll('.kt-login__aside')
        element[0].classList.remove('b-none');
        element[0].classList.add('w-adjust');
        this.router.navigate(['/account/track'])
        
    }

    navOrder(id) {
        this.router.navigate(['/app/sprintship/controller-order-package-detail/', id]);
    }

    // mapZoom(lat: any, long: any) {
    //     var bounds = new google.maps.LatLngBounds();
    //     bounds.extend(new google.maps.LatLng({ lat: lat, lng: long }));
    //     this.map.fitBounds(bounds)
    //     this.map.setZoom(19)
    //     // console.log("zoom map")
    // }

    editOrderContactDetails(contact) : void {
        //alert(contactId);
        this.editOrderContactDetailModal.show(contact);
    }

    getBgUrl(): string {
        return 'url(./assets/metronic/themes/' + this.currentTheme.baseSettings.theme + '/images/bg/bg-4.jpg)';
    }

    private supportsTenancyNameInUrl() {
        return (AppConsts.appBaseUrlFormat && AppConsts.appBaseUrlFormat.indexOf(AppConsts.tenancyNamePlaceHolderInUrl) >= 0);
    }

    initializeTenantResources(injector: Injector) {
        let appSessionService: AppSessionService = injector.get(AppSessionService);
        if (appSessionService.tenant && appSessionService.tenant.customCssId) {
            this.cssTrigger = true
            document.body.appendChild(
                DomHelper.createElement('link', [
                    {
                        key: 'id',
                        value: 'TenantCustomCss'
                    },
                    {
                        key: 'rel',
                        value: 'stylesheet'
                    },
                    {
                        key: 'href',
                        value: AppConsts.remoteServiceBaseUrl + '/TenantCustomization/GetCustomCss?tenantId=' + appSessionService.tenant.id
                    }])
            );
        }
        else{
            this.cssTrigger = false
        }
    }

    setCurrentLoginInformations(): void {
        this.shownLoginName = this.appSession.getShownLoginName();
        this.tenancyName = this.appSession.tenancyName;
        this.userName = this.appSession.user.userName;
    }


}