import {
    Component,
    Injector,
    OnInit,
    ViewChild,
    ViewEncapsulation,
    Input,
    OnDestroy,
    ElementRef,
    Renderer,
    QueryList,
    ViewChildren
} from '@angular/core';
import {
    ActivatedRoute,
    Router,RouterLink,RouterModule
} 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,
    UpdateCompleteRouteInput,
    VehicleLogServiceProxy
    
} 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 './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 './mark-as-complete-modal.component';

declare var $: any;
declare var jquery: any;
@Component({
    selector: 'table-routes-details',
    templateUrl: 'table-routes-details.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./table-routes-details.component.less', './tables.checkbox.component.less'],
    animations: [appModuleAnimation()],
    providers:[VehicleLogServiceProxy]

})

export class TableRoutesComponents 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('dataTable', {static: false}) tblData: ElementRef;
    @ViewChild('tblRoutesContainer',{ read:ElementRef, static: true }) tblRoutesContainer: ElementRef;
    @ViewChild('routeDetailModal', { static: true }) routeDetailModal: RouteDetailModal;
    @ViewChild('markAsCompleteModalComponent', { static: true }) markAsCompleteModalComponent: MarkAsCompleteModalComponent;
    @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;
    @Input('search_string') search: string;
    okay: number;
    updateCompletedInput = new UpdateCompleteRouteInput();
    saving = false;

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

    ) {
        super(injector);
        this.subscription = _cRoutesService.setStatisticsObj.subscribe(details => {
            // console.log('RECEIVED');
            // console.log(details);
        });
        this.subscription = _timerService.tmrMediator.subscribe(details=> {
            
        });
    }

    ngOnInit(): void {
        this.okay = 0;
    }
    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.primengTableHelper.totalRecordsCount = 0;
        if (this.filters.locationFilter !== undefined) {
            this.device_type = 'IOS';
            if (this.primengTableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }

            // this.filters.startDate = new Date(this.filters.startDate.toString());
            // this.filters.endDate = new Date(this.filters.endDate.toString());
            // let startDate = moment(moment(this.filters.startDate).format('YYYY-MM-DD HH:mm:ss'));
            // let endDate = moment(moment(this.filters.endDate).format('YYYY-MM-DD HH:mm:ss'));

            // let startDateA = startDate['_i'].split(' ');
            // startDateA = startDateA[0] + ' ' + '00:00:00';

            // let endDateA = endDate['_i'].split(' ');
            // endDateA = endDateA[0] + ' ' + '23:59:59';
            that.spinnerService.show();
            // console.log('FILTERS ON TABLE: ');
            // console.log(this.filters);
            this.filters.datePicked = this.formatDate(this.filters.startDate).toString()
            $('.packageStatus').html('<img src="/assets/images/kpi-spinner.gif" class="routeloader" class="routeloader" style="width:30px;height:30px;">');
            this._controllerRouteService.getFullList(undefined, this.filters.locationFilter,undefined, this.filters.routeId, this.filters.vehicleName, this.filters.routeName, this.filters.driverName, moment(this.filters.startDate), moment(this.filters.endDate), this.filters.filterTxt, undefined, this.primengTableHelper.getSorting(this.dataTable),  this.primengTableHelper.getMaxResultCount(this.paginator, event), this.primengTableHelper.getSkipCount(this.paginator, event))
                .subscribe(result => {
                    console.log(result);
                    let finalResult = {};
                    let fResult = {
                        "result": "OK",
                        "total_vehicles": 0,
                        "total_packages": 0
                    };
                    let vehicles = [];
                    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]['TotalDelivered'] = 0;
                        result.items[key]['ZoneIds'] = [];
                        result.items[key]['ETA'] = 'N/A';
                        result.items[key]['TotalZones'] = 0;
                        vehicles[result.items[key].vehicleId] = result.items[key].vehicleId;
                    }
                    
                    fResult.total_vehicles = Object.keys(vehicles).length;
                    that.primengTableHelper.totalRecordsCount = result.totalCount;
                    that.primengTableHelper.records = result.items;
                    that._controllerRouteService.getDetails(that.routeIds)
                        .subscribe(resultStatus => {
                           
                            
                            let total_packages = 0;
                            if (resultStatus == null) {
                                    this.spinnerService.hide();
                            } else {
                                   
                                if (Object.keys(resultStatus).length > 0) {
                                    that._vehicleLogsService.getTotalMileageWithMultipleRoutes(that.routeIds).subscribe(result => {
                                        for (key in result)
                                        {   
                                            this.dTable.nativeElement.querySelector('#mileage' + resultStatus[key].routeId).innerHTML = result[key].totalMileage;
                                        }
                                        
                                    });
                                    this.spinnerService.hide();
                                    var resp;
                                    for (key in resultStatus) {

                                        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]['TotalDelivered'] =  resultStatus[key].totalDelivered;
                                            result.items[resp]['ZoneIds'] =  resultStatus[key].zoneIds;
                                            result.items[key]['TotalZones'] = Object.keys(resultStatus[key].zoneIds).length - 1;
                                        }
                                        else
                                        {
                                            result.items[resp]['Status'] =  'NONE';
                                        }

                                        
                                        //$('#route' + resultStatus[key].routeId).html(resultStatus[key].totalPackages);
                                        //$('#status' + resultStatus[key].routeId).attr('status_code', resultStatus[key].statusCode);
                                        $('#packageStatus'+ resultStatus[key].routeId).html(`<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>`);
                                        //$('#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>');
                                        // that.primengTableHelper.records = result.items;
                                        that.attr[resultStatus[key].routeId] = resultStatus[key].statusCode;
                                        total_packages = total_packages + resultStatus[key].totalPackages;
                                    }
                                    // console.log('HTML');
                                    $.each($('.packageStatus'), function(key, val){
                                        // console.log($(val).children());
                                        if($(val).children().hasClass('routeloader'))
                                        {
                                            $(val).html('&nbsp;');
                                        }
                                    });
                                }
                            
                               
                            }
                            
                            
                            fResult.total_packages = total_packages;
                            that._cRoutesService.getTableStatistics(fResult);
                            
                            // $('.tr-controller-routes').on('load',function(){
                            //     alert('done');
                            // });
                            // $('.tr-controller-routes').on('ready',function(){
                            //     alert('done');
                            // });
                            // $('.td-controller-routes').ready(function(){
                            //     this.spinnerService.hide();
                            // });
                           
                        });

                    

                });
        }
    }
    hideLoader()
    {
        
        this.spinnerService.hide();
    }
    tickBox() {
        this.cBox.tickBox();
    }
    getSelected() {
        //console.log(this.chkBoxList);
        this.chkBoxList.forEach(chkBoxL => console.log(chkBoxL));
    }
    filterArray(array:any, key:any, value:any)
    {
        var i, arrList = [];
        for(i in array)
        {
           // console.log('SEARCH');
           // console.log(array[i][key]);
           // console.log(value);
            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(routeId) {
        // window.open('/app/sprintship/locator/'+routeId+'/'+this.filters);
        this.router.navigate([]).then(result => {
            window.open('/app/sprintship/locator/' + routeId + '/' + this.filters.locationFilter, '_blank');
        });
    }

    navigateDetail(id){
        this.router.navigate(['/app/sprintship/controller-routes-details/', id]);
    }

    setCompleted(record) {
        console.log("set");
        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 = new UpdateCompleteRouteInput();
            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'));
        }
    }
}