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 } 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 * as moment from 'moment';
import { AddOrderStatusModalComponent } from '../order-status/add-order-status-modal.component';
import { DomSanitizer } from '@angular/platform-browser';
import {Location} from '@angular/common';
declare var $: any;
declare var jquery:any;
@Component({
    templateUrl: './order-detail.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./order-detail.component.less']
})
export class OrderDetailComponent extends AppComponentBase implements OnInit {

    zoom: number = 12;
    // initial center position for the map
    lat: number = 34.044971;
    lng: number = -118.291243;
    map: any;
    image: Array<{src:string,caption:Date,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;
    //Filters
    filterText = '';
    id: any;
    _isLab: any;
    orderStatusLat: any
    orderStatusLong: any

    type="orders"
    sampleDate: any

    deliveryDate:any;

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

    collectionsCode: Array<any> = new Array<any>();

    orderDetails: OrderListDto = new OrderListDto();
    constructor(
        injector: Injector,
        private _orderAppService: OrderServiceProxy,
        private _attachmentService: OrderStatusAttachmentServiceProxy,
        public sanitizer: DomSanitizer,
        private _router: Router,
        private route: ActivatedRoute,
        private _location:Location,
        private router:Router
    ) {
        super(injector);
    }


    ngOnInit() {
        this._isLab = abp.features.isEnabled('App.RouteDetails');

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

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

        this._orderAppService.getOrderForView(
            this.id
        ).pipe(finalize(() => this.spinnerService.hide())).subscribe(result => {
            this.orderDetails = result;
            // result.pickupDetail.etaEnd =  moment.tz(result.pickupDetail.etaEnd, timeId)
            // console.log("DAte moment"+moment.tz(result.pickupDetail.etaEnd, timeId).format("MM/DD/YYYY"))
            // console.log("moment load date"+ moment.tz(localStorage.getItem('loadDate'), timeId).format("MM/DD/YYYY"))
            // console.log("sample"+ moment.tz(result.pickupDetail.etaEnd, timeId).format("MM/DD/YYYY"))
            if (this._isLab) {
                this.lat = result.pickupDetail.contact.address.geocode.latitude;
                this.lng = result.pickupDetail.contact.address.geocode.longitude;
            } 
            else {
                this.lat = result.deliveryDetail.contact.address.geocode.latitude;
                this.lng = result.deliveryDetail.contact.address.geocode.longitude;
            }
            

            result.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
                }
            });
        });

        // image
        // this.image = []
        this._attachmentService.getOrderStatusAttachmentList(this.id)
            .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: moment(result[index].deviceTime).toDate() });
                    });
                }
            });


        this._orderAppService.getLastStatus(this.id).subscribe(result => {
            if(result.orderStatusType.code == 'DELIVERED'){
                this.deliveryDate = moment(result.time);
            }
        });
    }

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


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

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

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

    goBack(){
        this._location.back();
    }

    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")
    }
  

}