import {
    Component,
    Injector,
    OnInit,
    ViewChild,
    ViewEncapsulation,
    Input,
    OnDestroy,
    ElementRef,
    Renderer,
    QueryList,
    ViewChildren
} from '@angular/core';
import {
    ActivatedRoute,
    Router
} from '@angular/router';
import {
    AppConsts
} from '@shared/AppConsts';
import {
    appModuleAnimation
} from '@shared/animations/routerTransition';
import {
    AppComponentBase
} from '@shared/common/app-component-base';
import {
    RouteListDto,
    RouteServiceProxy,
    ControllerRouteServiceProxy,
    ControllerKpiCountServiceProxy,
    UpdateRouteInput,
    UpdateCompleteRouteInput,
    VehicleLogServiceProxy,
    ShippingPackageServiceProxy

} from '@shared/service-proxies/service-proxies';

import * as moment from 'moment';
import {
    LazyLoadEvent
} from 'primeng/components/common/lazyloadevent';
import {
    Paginator
} from 'primeng/components/paginator/paginator';
import {
    Table
} from 'primeng/components/table/table';
import {
    HttpClient
} from '@angular/common/http';
import {
    finalize
} from 'rxjs/operators';
import {
    Subscription
} from 'rxjs';
import {
    CheckBoxComponent
} from '@app/sprintship/core-components/checkbox/checkbox.component.ts';
import {
    StatusComponent
} from '@app/sprintship/controller/status/status.component.ts';

import {
    ControllerRoutesService
} from '@app/sprintship/controller/routes/croutes.service';
import * as _ from 'lodash';
import * as status_icon from '@app/sprintship/controller/status/status_icon.json';

import {
    KPIBoxComponent
} from '@app/sprintship/controller/kpi-box/kpi-box.component';
import {
    TimerService
} from '@app/sprintship/core-components/timer/timer.service';
import {
    RouteDetailModal
} from '@app/sprintship/controller/route-detail/route-detail-modal.component';
import {
    MarkAsCompleteModalComponent
} from '../routes/mark-as-complete-modal.component';
declare var $: any;
declare var jquery: any;
@Component({
    selector: 'table-routes-laboratory-details',
    templateUrl: 'table-routes-laboratory-details.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./table-routes-laboratory-details.component.less', './tables.checkbox.component.less'],
    animations: [appModuleAnimation()],
    providers: [VehicleLogServiceProxy]
})

export class TableRoutesLaboratoryComponents extends AppComponentBase implements OnInit, OnDestroy {

    @ViewChild('dataTable', {
        static: true
    }) dataTable: Table;
    @ViewChild('paginator', {
        static: true
    }) paginator: Paginator;
    @ViewChildren('CheckBoxComponent') chkBoxList: QueryList < any > ;
    @ViewChildren(KPIBoxComponent) tKpiBoxComponents: KPIBoxComponent;
    @ViewChild(StatusComponent, {
        static: false
    }) statusDiv: StatusComponent;
    @ViewChild('routeDetailModal', {
        static: true
    }) routeDetailModal: RouteDetailModal;
    @ViewChild('markAsCompleteModalComponent', {
        static: true
    }) markAsCompleteModalComponent: MarkAsCompleteModalComponent;


    /**** ELEMENTS ****/
    @ViewChild('dataTable', {
        read: ElementRef,
        static: true
    }) dTable: ElementRef;

    @Input() filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: Date;
        endDate: Date;
        datePicked: string;
        filterTxt: string,
        routeId: string,
        routeName: string,
        vehicleName: string,
        driverName: string
    } = < any > {};
    device_type: string;
    routeIds: any;
    attr: any;
    respkey: any;
    saving = false;
    completion: any;
    route: UpdateRouteInput = new UpdateRouteInput();
    updateCompletedInput = new UpdateCompleteRouteInput();
    totalMileage: number;
    packages: Array < {
        id: number,
        name: string
    } > = new Array();
    @Input('search_string') search: string;

    subscription: Subscription;
    private cBox: CheckBoxComponent;
    constructor(
        injector: Injector,
        private _routeService: RouteServiceProxy,
        private _controllerRouteService: ControllerRouteServiceProxy,
        private _cRoutesService: ControllerRoutesService,
        private _cKpiService: ControllerKpiCountServiceProxy,
        private _vehicleLogsService: VehicleLogServiceProxy,
        private _controllerRoutePackages: ShippingPackageServiceProxy,
        private _timerService: TimerService,
        private router: Router,
        private renderer: Renderer,
        private elem: ElementRef,

    ) {
        super(injector);
        this.subscription = _cRoutesService.setStatisticsObj.subscribe(details => {

			
        });
        this.subscription = _timerService.tmrMediator.subscribe(details => {

        });
    }

    ngOnInit(): void {

    }
    setFilter(value: string) {
        this.search = value;
    }
    ngOnDestroy(): void {

    }
    formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }
    populateTable(event ? : LazyLoadEvent): void {

        let timeId = localStorage.getItem('timeZoneId');

        moment.tz.setDefault(timeId);


        var that = this;
        var key, arrResult = [],
            resp;
        this.attr = [];
        that.routeIds = [];
        that.spinnerService.show();

        if (this.filters.locationFilter !== undefined) {
            this.device_type = 'IOS';
            // that.primengTableHelper.defaultRecordsCountPerPage = 50;
            if (this.primengTableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }

            this.packages = [];

            this._controllerRouteService.getFullListLaboratoryEdition(undefined, this.filters.locationFilter, undefined, this.filters.routeId, this.filters.vehicleName, this.filters.routeName, this.filters.driverName,
                    moment.tz(localStorage.getItem('loadDate'), timeId),
                    moment.tz(localStorage.getItem('loadDate'), timeId), this.filters.filterTxt, undefined, this.primengTableHelper.getSorting(this.dataTable), this.primengTableHelper.getMaxResultCount(this.paginator, event), this.primengTableHelper.getSkipCount(this.paginator, event))
                .subscribe(result => {
                this._controllerRoutePackages.getShippingPackage(undefined, undefined, undefined, undefined, undefined, undefined).subscribe(resultPackages => {
                    let finalResult = {};
                    let fResult = {
                        "result": "OK",
                        "total_vehicles": 0,
                        "total_packages": 0
                    };
                    let vehicles = [];

                    this.primengTableHelper.totalRecordsCount = result.totalCount;
                    this.primengTableHelper.records = result.items;
                    for (key in result.items) {
                        that.routeIds.push(result.items[key].routeId);
                        result.items[key]['Status'] = 'NONE';
                        result.items[key]['TotalPackages'] = 0;
                        // result.items[key]['ETA'] = result.items[key].ETA;
                        vehicles[result.items[key].vehicleId] = result.items[key].vehicleId;
                    }

                    
					that.packages = [];
                    resultPackages.items.forEach(element => {
                        if (element.name !== 'Default') {
                            that.packages.push(element);
                        }
                    });
                    
                    fResult.total_vehicles = Object.keys(vehicles).length;

                    that._controllerRouteService.getDetailsLaboratoryEdition(that.routeIds)
                        .subscribe(resultStatus => {


                            let total_packages = 0;
                            if (resultStatus == null) {
                                that.spinnerService.hide();
                            } else {

                                if (Object.keys(resultStatus).length > 0) {
                                    var resp;
                                    that._controllerRouteService.getCountRouteDetails(that.routeIds)
                                        .subscribe(resultCount => {

                                            var fCount = JSON.parse(JSON.stringify(resultCount));
                                            var fStatus = [];
                                            var x;

                                            for (key in fCount) {

                                                x = $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total');
                                                x = x + parseInt(fCount[key].totalPackages);
                                                $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total', x);
                                                if ($('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total') !== undefined) {
                                                    $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total', x);
                                                    $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).html(x);
                                                    $('.totalRoute' + fCount[key].routeId).html(parseInt($('.totalRoute' + fCount[key].routeId).html()) + parseInt(fCount[key].totalPackages));
                                                }
                                            }

                                                    $.each($('.statsCountRoute'), function(key, val) {

                                                if ($(val).children().hasClass('routeloader')) {
                                                    $(val).html('&nbsp;');
                                                }
                                            });
                                        
                                    that._vehicleLogsService.getTotalMileageWithMultipleRoutes(that.routeIds).subscribe(result => {
                                        for (key in result) {
                                            this.dTable.nativeElement.querySelector('#mileage' + resultStatus[key].routeId).innerHTML = result[key].totalMileage;
                                        }

                                    });
                                    var rStatus = [];
                                    for (key in resultStatus) {
                                        rStatus[resultStatus[key].routeId] = [];
                                        resp = that.filterArrayKeys(result.items, 'routeId', resultStatus[key].routeId.toString());

                                        if (resp !== null) {
                                            result.items[resp]['Status'] = resultStatus[key].statusCode;
                                            result.items[resp]['TotalPackages'] = resultStatus[key].totalPackages;
                                            result.items[resp]['TotalPickedUp'] = resultStatus[key].totalPickedUp;
                                            result.items[resp]['TotalCallin'] = resultStatus[key].totalCallIn;
                                        } else {
                                            result.items[resp]['Status'] = 'NONE';
                                        }
                                        //$('#route' + resultStatus[key].routeId).html(resultStatus[key].totalPackages);
                                        //$('#status' + resultStatus[key].routeId).attr('status_code', resultStatus[key].statusCode);
                                        //$('#statusRow' + resultStatus[key].routeId).html('<status status_code="'+resultStatus[key].statusCode+'" #statusCode></status>');
                                        // // $('#statusRow' + resultStatus[key].routeId).html('<ng-container *ngTemplateOutlet="waitingPickup; context: myContext"></ng-container>');
                                        // this.dTable.nativeElement.querySelector('#packageStatus'+ resultStatus[key].routeId).innerHTML(`<div class="order-status" title="`+resultStatus[key].statusCode+`">
                                        //                                                         <i class="fa `+ status_icon.default[resultStatus[key].statusCode].icon +` `+ status_icon.default[resultStatus[key].statusCode].color +`"></i>
                                        //                                                     </div>`);

                                        this.dTable.nativeElement.querySelector('#packageStatus' + resultStatus[key].routeId).innerHTML = `<div class="order-status" title="` + resultStatus[key].statusCode + `">
																									<i class="fa ` + status_icon.default[resultStatus[key].statusCode].icon + ` ` + status_icon.default[resultStatus[key].statusCode].color + `"></i>
																								</div>`;


                                        if (resultStatus[key].totalPickedUp > 0) {
                                            this.dTable.nativeElement.querySelector('#packageStatistics' + resultStatus[key].routeId).innerHTML = `<span>
																										` + resultStatus[key].totalPickedUp + ` / ` + resultStatus[key].totalPackages + `
																										</span>
																										`;
                                            // this.dTable.nativeElement.querySelector('#packageStatistics' + resultStatus[key].routeId).innerHTML = `<span>
                                            // ` + resultStatus[key].totalPickedUp + `
                                            // </span>
                                            // `;
                                        } else {
                                            this.dTable.nativeElement.querySelector('#packageStatistics' + resultStatus[key].routeId).innerHTML = `<span>
																											0 / ` + resultStatus[key].totalPackages + `
																											</span>
																										`;
                                            // this.dTable.nativeElement.querySelector('#packageStatistics' + resultStatus[key].routeId).innerHTML = `<span>
                                            //     0` + `    
                                            //     </span>
                                            // `;
                                        }
                                        this.dTable.nativeElement.querySelector("#willCallStatus" + resultStatus[key].routeId).innerHTML = resultStatus[key].totalCallIn;
                                        that.attr[resultStatus[key].routeId] = resultStatus[key].statusCode;
                                        total_packages = total_packages + resultStatus[key].totalPackages;

                                        // this.dTable.nativeElement.querySelector('#packageTotal' + resultStatus[key].routeId).innerHTML = resultStatus[key].totalPackages;
                                    }
                                    var packageStatObj = this.dTable.nativeElement.querySelectorAll('.packageStatus');

                                    // packageStatObj.forEach(obj => {
                      
                                    // });
                                    $.each($('.packageStatus'), function(key, val) {

                                        if ($(val).children().hasClass('routeloader')) {
                                            $(val).html('&nbsp;');
                                        }
                                    });
                                    $.each($('.packageStatistics'), function(key, val) {
                   
                                        if ($(val).children().hasClass('routeloader')) {
                                            $(val).html('&nbsp;');
                                        }
                                    });
                                    $.each($('.mileage'), function(key, val) {

                                        if ($(val).children().hasClass('routeloader')) {
                                            $(val).html('&nbsp;');
                                        }
                                    });

                                    // this._controllerRoutePackages.getShippingPackage(undefined, undefined, undefined, undefined, undefined, undefined).subscribe(result => {

                                    //     result.items.forEach(element => {
                                    //         if (element.name !== 'Default') {
                                    //             this.packages.push(element);
                                    //         }
                                    //     });

                                    // that._controllerRouteService.getCountRouteDetails(that.routeIds)
                                    //     .subscribe(resultCount => {

                                    //         var fCount = JSON.parse(JSON.stringify(resultCount));
                                    //         var fStatus = [];
                                    //         var x;

                                    //         for (key in fCount) {

                                    //             x = $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total');
                                    //             x = x + parseInt(fCount[key].totalPackages);
                                    //             $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total', x);
                                    //             if ($('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total') !== undefined) {
                                    //                 $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).data('total', x);
                                    //                 $('#statsCountRoute' + fCount[key].routeId + fCount[key].packageId).html(x);
                                    //                 $('.totalRoute' + fCount[key].routeId).html(parseInt($('.totalRoute' + fCount[key].routeId).html()) + parseInt(fCount[key].totalPackages));
                                    //             }
                                    //         }

                                    //         $.each($('.statsCountRoute'), function(key, val) {

                                    //             if ($(val).children().hasClass('routeloader')) {
                                    //                 $(val).html('&nbsp;');
                                    //             }
                                    //         });
                                    //         // for(key in resultCount)
                                    //         // {
                     

                                    //         //    // if(fStatus[resultCount[key].routeId] === undefined)
                                    //         //    // {
                                    //         //    //     fStatus[resultCount[key].routeId] = [];
                                    //         //    // }
                                    //         //    // fStatus[resultCount[key].routeId][resultCount[key].packageId] = resultCount[key].totalPackages;
                                    //         //   $('.statsCountRoute' + resultCount[key].routeId + ' #statsCountItem' + resultCount[key].packageId).html(resultCount[key].totalPackages);
                                    //         //      // rStatus[resultCount[key].routeId][resultCount[key].packageId] = 0;
                                    //         // }


      


                                    //     });



                                    //});
                                    that.spinnerService.hide();
                                    });
                                } // END ONE

                         
                            } // END OF ELSE


                            fResult.total_packages = total_packages;
                            that._cRoutesService.getTableStatistics(fResult);

                        }); // END 2
					});
                }); // END FULL LIST
        }
    }
    tickBox() {
        this.cBox.tickBox();
    }
    getSelected() {

		
    }
    filterArray(array: any, key: any, value: any) {
        var i, arrList = [];
        for (i in array) {

            if (array[i][key] == value) {
                arrList.push(array[i]);
            }
        }
        return arrList;
    }
    filterArrayKeys(array: any, key: any, value: any) {
        var i, keys = 0;
        for (i in array) {
            if (array[i][key] == value) {
                keys = i;
            }
        }
        return keys;
    }
    openMap(userId, routeId) {
        // window.open('/app/sprintship/locator/'+routeId+'/'+this.filters);
        this.router.navigate([]).then(result => {
            window.open('/app/sprintship/locator/' + userId + '/' + routeId, '_blank');
        });
    }

    navigateDetail(id) {
        this.router.navigate(['/app/sprintship/controller-routes-details/', id]);
    }
    updateRoute() {
        this._routeService.updateRoute(this.route)
            .pipe(finalize(() => this.saving = false))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
            });
    }

    setDeparture(route: any) {
        if (!this.route.locked) {
            if (this.route.departure) {
                this.route.departure = null;
            } else {
                this.route.departure = moment(new Date());
            }
            this.route.vehicleId = route.vehicleId;
            this.route.loadDate = route.loadDate;
            this.route.locked = route.locked;

            this.route.locationId = parseInt(localStorage.getItem('operatingLocationId'));
            this.route.id = route.routeId;
            this.updateRoute();
        } else {
            this.notify.info(this.l('Unlocked Loadlist First'));
        }
    }
    // setCompleted(record) {
    //     if (!record.locked) {
    //         if (record.completion) {
    //             record.completion = undefined;
    //             this.updateCompletedInput.dateCompleted = record.completion;
    //             this.updateCompletedInput.id = record.routeId;
    //             this._controllerRouteService.updateCompletedRoute(this.updateCompletedInput)
    //                 .pipe(finalize(() => { this.saving = false; }))
    //                 .subscribe(() => {
    //                     this.notify.info(this.l('Saved Successfully'));
    //                 });
    //         } else {
    //             record.completion = moment.utc(moment(new Date(Date.now())).format('YYYY-MM-DD h:m a')).toDate();
    //         }

    //     } else {
    //         this.notify.info(this.l('Unlocked Loadlist First'));
    //     }
    // }
    setCompleted(record) {
        if (!record.locked) {
            if (record.completion) {
                record.completion = undefined;
            } else {
                record.completion = moment.utc(moment(new Date(Date.now())).format('YYYY-MM-DD h:m a')).toDate();
            }
            this.updateCompletedInput.dateCompleted = record.completion;
            this.updateCompletedInput.id = record.routeId;
            this._controllerRouteService.updateCompletedRoute(this.updateCompletedInput)
                .pipe(finalize(() => {
                    this.saving = false;
                }))
                .subscribe(() => {
                    this.notify.info(this.l('Saved Successfully'));
                });
        } else {
            this.notify.info(this.l('Unlocked Loadlist First'));
        }
    }
}