import { Component, Injector, OnInit, ViewChild, ViewEncapsulation, ElementRef, AfterViewInit, Renderer, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AppConsts } from '@shared/AppConsts';
import { CommonModule } from '@angular/common';  
import { appModuleAnimation } from '@shared/animations/routerTransition';

import { AppComponentBase } from '@shared/common/app-component-base';
import { RouteListDto, 
         RouteServiceProxy,
         LocationListDto,
         LocationServiceProxy,
         ControllerRouteServiceProxy,
         GenerateRouteInputDto,
        //  ControllerRouteDetailServiceProxy
        ProfileServiceProxy

} 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 * as _ from 'lodash';
import { TabsetComponent } from 'ngx-bootstrap';

import { TableRoutesLaboratoryComponents } from './table-routes-laboratory-details.component';
import { TimerComponent } from '@app/sprintship/core-components/timer/timer.component';
import { ControllerRoutesService } from '@app/sprintship/controller/routes/croutes.service';
import { ControllerShowHideComponent } from '@app/sprintship/controller/core-components/controller-show-hide-modal.component.ts';
import { CreateRouteControllerModalComponent } from '@app/sprintship/controller/modals/create-routes-controller-modal.component';
import { DriverListTabComponent } from '../../controller/drivers/driver-list.component';
import { KPIBoxComponent } from '../kpi-box/kpi-box.component';
import { VehicleListTabComponent } from '../vehicles/vehicle-list.component';
import { OrderListTabComponent } from '../orders/order-list.component';

import * as signalR from '@aspnet/signalr';
import { interval } from 'rxjs';
import { GenerateRoutesLaboratoryTrackingComponent } from './generate-routes-laboratory-tracking.component';
import * as controller_table_settings from '@app/sprintship/controller/core-components/controller-table-settings.json';
import { ControllerOrderPackagesComponent } from '../order-packages/order-packages-list.component';

import { TimerService } from '@app/sprintship/core-components/timer/timer.service';
import { CallBackModalComponent } from '@app/sprintship/controller/modals/call_back_modal.component';
import { CallInModalComponent } from '@app/sprintship/controller/modals/call_in_modal.component';

import { RouteDetailModal } from '@app/sprintship/controller/route-detail/route-detail-modal.component';
import { ControllerHeaderFlyoutComponent } from '@app/shared/layout/flyout/controller-header/controller-header-flyout.component';
import { ControllerOrderIncidentsComponent } from '../order-incident/order-incident-list.component';



declare var $: any;
declare var jquery:any;
@Component({
    selector: 'controller-laboratory-main',
    templateUrl: 'croutes.laboratory.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./croutes.laboratory.component.less'],
    animations: [appModuleAnimation()],
    providers: [ControllerRoutesService, TimerService]
})

export class CRoutesLaboratoryComponent extends AppComponentBase implements OnInit {

    private hubConnection: signalR.HubConnection

    @ViewChild('controllerTab', { static: false }) staticTabs: TabsetComponent;
    @ViewChild('controllerTab', { read: ElementRef, static: true }) cRef: ElementRef;
    @ViewChild('controllerHeader',{read:ElementRef, static: true}) cHeader: ElementRef;
    @ViewChild('timerComponent', { static: false }) timerComponent: TimerComponent;
    @ViewChild(TableRoutesLaboratoryComponents, {static: false}) tRouteComponents: TableRoutesLaboratoryComponents;
    @ViewChild(DriverListTabComponent, {static: false}) driverTab: DriverListTabComponent;
    @ViewChild(VehicleListTabComponent, {static: false}) vehicleTab: VehicleListTabComponent;
    @ViewChild(OrderListTabComponent, {static: false}) tOrderComponents: OrderListTabComponent;
    @ViewChild(KPIBoxComponent, {static: false}) tKpiComponents: KPIBoxComponent;
    // @ViewChild(KPIBoxComponent, {static: false}) tKpiBoxComponents: KPIBoxComponent;
    @ViewChild('dr', { static: false }) dr : ElementRef;
    @ViewChild('columnChooser', {static: false}) columnChooser: ControllerShowHideComponent;
    @ViewChild(ControllerOrderPackagesComponent, {static: false}) tOrderPackages: ControllerOrderPackagesComponent;
    @ViewChild('callBackModal', {static: false}) callBackModal: CallBackModalComponent;
    @ViewChild('callInModal', {static: false}) callInModal: CallInModalComponent;
    @ViewChild(ControllerOrderIncidentsComponent, { static: false }) tOrderIncidents: ControllerOrderIncidentsComponent;

    @ViewChild('generateRoutesLaboratoryTracking', {static: false}) generateRoutesLaboratoryTracking: GenerateRoutesLaboratoryTrackingComponent;
    @ViewChild('createRouteControllerModal', {static: false}) createRouteControllerModal: CreateRouteControllerModalComponent;
    @ViewChild('controllerHeaderFlyoutComponent', { static: false }) controllerHeaderFlyoutComponent: ControllerHeaderFlyoutComponent;
    @ViewChild('routeDetailModal', { static: true }) routeDetailModal: RouteDetailModal;
    
    locations: LocationListDto[] = [];
    hide: boolean = true;
    hide_menu: boolean = true;
    key: number;
    tblMain: any;
    todaysDate: Date;
    event: LazyLoadEvent;
    generateEnable: boolean;
    time_interval: number;
    heightTemp: string;
    locationName:string;
    filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: Date;
        endDate: Date;
        orderStatusCode: string;
    } = <any>{};

    inputs: {
        locationId: number;
        loadDate: Date;
    } = <any>{};
    search_string: string;
    txtFilter: string;
    driverListComponent: boolean = false;
    vehicleListComponent: boolean = false;
    orderPackageListComponent: boolean = false;
    orderListComponent: boolean = false;
    statusLocatorComponent: boolean = false;
    isEnabledLaboratory: boolean = false;
    orderIncidentListComponent: boolean = false;
    userProfile: {
        name: string,
        surname: string,
        userName: string,
        emailAddress: string,
        phoneNumber: string,
        isPhoneNumberConfirmed: boolean,
        timezone: string,
        qrCodeSetupImageUrl: string,
        isGoogleAuthenticatorEnabled: boolean
    } = <any>{};
    @Input('edition_name') edition: string;
	constructor(
        injector: Injector,
        private _controllerRouteService: ControllerRouteServiceProxy,
        private _locationServiceProxy: LocationServiceProxy,
        private _routeService: RouteServiceProxy,
        private _cRoutesService: ControllerRoutesService,
        private _timerService: TimerService,
        private renderer: Renderer, 
        private elem: ElementRef,
        private _profileService: ProfileServiceProxy
    ) {
        super(injector);

        this.todaysDate = new Date(Date.now());
        this.filters.startDate = this.todaysDate;
        this.filters.endDate = this.todaysDate;
        this.isEnabledLaboratory = abp.features.isEnabled('App.ControllerRouteManagementFeature');
        this.generateEnable = false;
    }

    hideKpi(): void {
     
        if (this.hide == true)
        {   
            this.hide = false;
            $('#kpiToggleIcon').removeClass('fa-eye-slash');
            $('#kpiToggleIcon').addClass('fa-eye');
            $('#kpiIndicator').html('Show KPI');
        } 
        else 
        {
            this.hide = true;
            $('#kpiToggleIcon').addClass('fa-eye-slash');
            $('#kpiToggleIcon').removeClass('fa-eye');
            $('#kpiIndicator').html('Hide KPI');
        }
    }

    hideMenu(): void {         

        if (this.hide_menu == true)
        {
            $('.dropdown-controller-menu').css('display', 'block');
            this.hide_menu = false;
        } 
        else 
        {
            $('.dropdown-controller-menu').css('display', 'none');
            this.hide_menu = true;
        }
    }

    showColumnChooser()
    {
        this.columnChooser.show();
    }

    ngOnInit(): void {

        let that = this;
        this.time_interval = $('#refreshInterval').val();
        this.todaysDate = new Date(Date.now());
       
        // this.cHeader.nativeElement.querySelector('.controllerDatePicker').value = moment(that.todaysDate).format('MM/DD/YYYY');
        this.spinnerService.show();
        
        this.getLocationsOnLoad().then(function(result){
            
            $('#inputLocation').val(result);
            var locationId = result;
            if(localStorage.getItem('operatingLocationId') == null)
            {
                localStorage.setItem('operatingLocationId', $('#inputLocation').val());
            }else{
                $('#inputLocation').val(localStorage.getItem('operatingLocationId'));
            }
            if(localStorage.getItem('loadDate') == null)
            {
                localStorage.setItem('loadDate', moment(that.todaysDate).format('YYYY-MM-DD'));
            }
            else
            {
                that.filters.locationFilter = parseInt($('#inputLocation').val());
                that.filters.startDate = moment(localStorage.getItem('loadDate')).toDate();
                that.filters.endDate = moment(localStorage.getItem('loadDate')).toDate();
            
                $(".datePicker").text(moment(localStorage.getItem('loadDate')).format('dddd, MMMM DD, YYYY'));
                // this.filters.startDate = moment(localStorage.getItem('loadDate')).format('MM/DD/YYYY');
                // this.filters.endDate = moment(localStorage.getItem('loadDate')).format('MM/DD/YYYY');
         
            }that.filterRoutes();
            // that.controllerHeaderFlyoutComponent.filterRoutes();
            
            // that.filters.startDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
            // that.filters.endDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;

            // $('#hiddenStartDate').val(that.filters.startDate);
            // $('#hiddenEndDate').val(that.filters.endDate);
            
            // that.tKpiComponents.getKpiCount();
            // that.tRouteComponents.populateTable();
            // that.spinnerService.hide();
            // that.inputs.loadDate = that.filters.startDate;
            // //localStorage.setItem('loadDate',  moment(that.cHeader.nativeElement.querySelector('.controllerDatePicker').value).format('YYYY-MM-DD'));
            // localStorage.setItem('loadDate', moment(that.todaysDate).format('YYYY-MM-DD'));
            
        });
        
        $('.selLocation').select2();
        // $('#kt_daterangepicker_2').daterangepicker({
        //     buttonClasses: ' btn',
        //     applyClass: 'btn-primary',
        //     cancelClass: 'btn-secondary'
        // }, function(start, end, label) {
        //     $('#kt_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
        //     $('#hiddenStartDate').val(start.format('YYYY-MM-DD'));
        //     $('#hiddenEndDate').val(end.format('YYYY-MM-DD'));

        //     that.filters.startDate = $('#hiddenStartDate').val();
        //     that.filters.endDate = $('#hiddenEndDate').val();  
            
        // });

        
        // $('#locationSelectInput').on('change', function(){
        //     $("#locationSelectInput").val($(this).val());
        //     that.filters.locationFilter = $("#locationSelectInput").val();
        // });
        
        var heightTmp = (parseInt($('.kt-grid__item').height()) - (parseInt($('.kt-subheader').height()) * 3)) - 370;
        this.heightTemp =heightTmp.toString() + 'px';
        this.cRef.nativeElement.querySelectorAll('#tblRoutes .primeng-datatable-container')[0].style.height = this.heightTemp;

        this.backgroundProcessListener();
       
        this._profileService.getCurrentUserProfileForEdit().subscribe((result) => {
            this.userProfile.name = result.name;
            this.userProfile.surname = result.surname;
            this.userProfile.userName = result.userName;
            this.userProfile.emailAddress = result.emailAddress;
            this.userProfile.phoneNumber = result.phoneNumber;
            this.userProfile.isPhoneNumberConfirmed = result.isPhoneNumberConfirmed;
            this.userProfile.timezone = result.timezone;
            this.userProfile.qrCodeSetupImageUrl = result.qrCodeSetupImageUrl;
            this.userProfile.isGoogleAuthenticatorEnabled = result.isGoogleAuthenticatorEnabled;
    });
    }

    onShown(): void {
       
    }

    getLocationsOnLoad()
    {
        let that = this;
        return new Promise(function(resolve, reject){
            that._locationServiceProxy.getLocation(undefined, undefined, undefined, undefined, undefined, undefined, undefined)
                .subscribe(result => {
                    that.locations = result.items;
         
                    that.locationName = that.locations['0']['name'];
                    $("#locationSelectInput").val(result.items["0"].id);
                    that.txtFilter = null; null; null;
                    resolve(result.items["0"].id);
                });
        });
    }


    loadRouteComponent(){
        let that = this;
        // let ktHolder = $('#kt_datetimepicker_6').val().split('/');
        // var nowDate = moment(this.todaysDate).toDate();
        // let nowDateMoment = moment(nowDate);
        // var endDate = new Date(ktHolder[2], ktHolder[0] - 1, ktHolder[1]);
        // // endDate = moment(endDate);
        // endDate = moment(endDate).toDate();
        // let duration = {};
        // duration['_data'] = {'days': 0};
        // duration = moment.duration(nowDateMoment.diff(endDate));
        
        // if(typeof duration !== "undefined")
        // {
        //     if(duration['_data'].days > 0)
        //     {
        //         this.generateEnable = true;
        //     }        
        //     else
        //     {
        //         this.generateEnable = false;
        //     }    
        // }
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        this._cRoutesService.setStatistics({"result": "OK", "total_vehicles": "0", "total_packages": "0"});
        // that.filters.locationFilter = $("#locationSelectInput").val();
        that.tRouteComponents.populateTable();
        // that.tDriverComponents.getDriverList(this.event);
        that.tKpiComponents.getKpiCount();
        that.vehicleTab.getVehicleList();
        that.driverTab.getDriverList();
        
        
        
    }
    refreshPage(value: any) {
        //if(value.action === 'CONTROLLER_REFRESH')
        //{
            this.filterRoutes();
        //}
        
    }
    refresh(event: any) {
        this.filterRoutes();
    }
    changeInterval(value: any) {
       
        this.time_interval = value;
    }
    filterRoutes()
    {
        
        let key, selectTab, activeTab;
        this.cRef.nativeElement.querySelectorAll('li').forEach(e=>{
            selectTab = e.className;
            if(parseInt(selectTab.search(/active/i)) > 0)
            {
                activeTab = e.innerText;
            }
        });
        let key2;
        for (key2 in this.locations) {
            if (this.locations[key2].id == this.filters.locationFilter) {
                $(".location").text(this.locations[key2].name +" - ");
            }
        }
        $(".datePicker").text(moment(this.filters.endDate).format('dddd, MMMM DD, YYYY'));
        let that = this;
        
        var nowDate = moment(this.todaysDate).toDate();
        let nowDateMoment = moment(nowDate);
        
        //localStorage.setItem('loadDate',  moment(that.cHeader.nativeElement.querySelector('.controllerDatePicker').value).format('YYYY-MM-DD'));
        localStorage.setItem('loadDate',  moment(this.filters.endDate).format('YYYY-MM-DD'));
        
        let duration = {};
        duration['_data'] = {'days': 0};
        // duration = moment.duration(nowDateMoment.diff(that.cHeader.nativeElement.querySelector('.controllerDatePicker').value));
        duration = moment.duration(nowDateMoment.diff(this.filters.endDate));

                if(typeof duration !== "undefined")
                {

                    if(duration['_data'].days > 0)
                    {
                        this.generateEnable = true;
                    }        
                    else
                    {
                        this.generateEnable = false;
                    }    
                }
                // this.filters.startDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                // this.filters.endDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                this._cRoutesService.setStatistics({"result": "OK", "total_vehicles": "0", "total_packages": "0"});

                //localStorage.setItem('loadDate',  moment(that.cHeader.nativeElement.querySelector('.controllerDatePicker').value).format('YYYY-MM-DD'));
                localStorage.setItem('loadDate',  moment(this.filters.endDate).format('YYYY-MM-DD'));

                // this.filters.startDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                // this.filters.endDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                // this.inputs.loadDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                this.inputs.loadDate = this.filters.endDate;

                // that.filters.locationFilter = $("#locationSelectInput").val();
                // that.inputs.loadDate = that.filters.startDate;
                that.tRouteComponents.populateTable();
                // that.tDriverComponents.getDriverList(this.event);
                // that.tKpiComponents.getKpiCount();
                
             
                // this.loadOrderListComponent();
                
            
                this.loadVehicleListComponent();
                // this.tVehicleComponents.getVehicleList(undefined);
                
            
                this.loadDriverListComponent();
           
                if(typeof duration !== "undefined")
                {

                    if(duration['_data'].days > 0)
                    {
                        this.generateEnable = true;
                    }        
                    else
                    {
                        this.generateEnable = false;
                    }    
                }
                //localStorage.setItem('loadDate',  moment(that.cHeader.nativeElement.querySelector('.controllerDatePicker').value).format('YYYY-MM-DD'));
                localStorage.setItem('loadDate',  moment(this.filters.endDate).format('YYYY-MM-DD'));

                // this.filters.startDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                // this.filters.endDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
                // this.inputs.loadDate = that.cHeader.nativeElement.querySelector('.controllerDatePicker').value;             
                this._cRoutesService.setStatistics({"result": "OK", "total_vehicles": "0", "total_packages": "0"});
                // that.filters.locationFilter = $("#locationSelectInput").val();
                that.tRouteComponents.populateTable();
                // that.tDriverComponents.getDriverList(this.event);
                that.tKpiComponents.getKpiCount();
                this.tOrderPackages.getOrderPackages();
                //this.tOrderComponents.getOrder();
                that.tOrderIncidents.getOrderIncident();
                that.vehicleTab.getVehicleList();
                that.driverTab.getDriverList();


         
     

        this._timerService.default = {'action': 'CONTROLLER_REFRESH'};
        this._timerService.messageTimer({'action': 'CONTROLLER_REFRESH'});
            

    }
    loadDriverListComponent(){
        
        // let that = this;
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        // that.filters.locationFilter = $("#locationSelectInput").val();
        // this.driverListComponent = true;
        // this.driverTab.getDriverList();
    }
    loadVehicleListComponent(){
        
        // let that = this;
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        // that.filters.locationFilter = $("#locationSelectInput").val();
        // this.vehicleListComponent = true;
        // this.vehicleTab.getVehicleList();
        
    }

    loadOrderPackagesListComponent(){
        let that = this;
        this.orderPackageListComponent = true;
        // that.filters.locationFilter = $("#locationSelectInput").val();
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        this.tOrderPackages.getOrderPackages();
        that.filters.orderStatusCode = undefined;
    }

    loadOrderIncidentListComponent() {
        let that = this;
        this.orderIncidentListComponent = true;
        // that.filters.locationFilter = $("#locationSelectInput").val();
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();

        this.tOrderIncidents.getOrderIncident();

    }


    loadOrderListComponent(){
        
        let that = this;
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        
        // that.filters.locationFilter = $("#locationSelectInput").val();
        this.orderListComponent = true;
        
        this.getLocationsOnLoad();
        this.tOrderComponents.getOrder(undefined);
    }

    getSelected()
    {
 
        let elements = this.elem.nativeElement.querySelectorAll('.checkboxItem');

    }
    filterRoutesByParameters()
    {
       
        this.search_string = this.txtFilter;
        this.tRouteComponents.setFilter(this.txtFilter);
        this._cRoutesService.setStatistics({"result": "OK", "total_vehicles": "0", "total_packages": "0"});
        this.tRouteComponents.populateTable();
    }


    backgroundProcessListener() {

        this.hubConnection = new signalR.HubConnectionBuilder()
            .withUrl(AppConsts.remoteServiceBaseUrl + '/signalr-background')
            .build();

        this.hubConnection
            .start()
            .then(() => console.log('Connection started'))
            .catch(err => console.log('Error while starting connection: ' + err));

        this.hubConnection.on('BackgroundMessage:' + abp.session.tenantId + ':generateRoutes', (message) => {

            if(message.match(/Route created/) || message.match(/Order created/)) {

                this.generateRoutesLaboratoryTracking.logMessage(message, true);
            }
            else {

                this.generateRoutesLaboratoryTracking.logMessage(message);
            }
        });
    }
    showCreateRoutes() {
        this.createRouteControllerModal.show();
    }
    showCallBack () {
        this.callBackModal.show();
    }
    showCallIn () {
        this.callInModal.show();
    }
    async generateRoute()
    {
        this.generateRoutesLaboratoryTracking.clearMessages();
           
        // this.filters.startDate = $('#kt_datetimepicker_6').val();
        // this.filters.endDate = $('#kt_datetimepicker_6').val();
        // this.filters.locationFilter = $("#locationSelectInput").val();

        let params = new GenerateRouteInputDto({
            loadDateEnd: moment(this.filters.endDate),
            loadDateStart: moment(this.filters.startDate),
            locationId: this.filters.locationFilter,
            action: "RUN",
            jobId: ""
        });

        let runResult = await this._controllerRouteService.generateRouteManual(params).toPromise();

        if(runResult.success) {

            if(runResult.jobId) {

                this.generateRoutesLaboratoryTracking.modal.show();

                params.jobId = runResult.jobId;

                params.action = "TRACK";

                let observable = interval(2000).subscribe((val) => { 

                    this._controllerRouteService.generateRouteManual(params).subscribe(watcher => {

                        if(watcher.result == "DONE") {

                            this.generateRoutesLaboratoryTracking.complete();

                            observable.unsubscribe();

                            this.filterRoutes();
                        }
                    });
                });
            }
        }
    }
    showFlyOut(): void {
        this.controllerHeaderFlyoutComponent.showFlyout(this.locations,this.userProfile);
    }
}