import {
    Component,
    Injector,
    OnInit,
    ViewChild,
    ViewEncapsulation,
    ElementRef,
    AfterViewInit,
    Renderer,
    Input
} from '@angular/core';
import {
    ActivatedRoute,
    Route,
    Router
} 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,
    AddressAddressTypeLookupTableDto,
    ProfileServiceProxy,
    //  ControllerRouteDetailServiceProxy

} 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';

/**** STANDARD ****/
import {
    TableRoutesComponents
} from '@app/sprintship/controller/routes/table-routes-details.component';
/**** LABORATORY ****/
import {
    TableRoutesLaboratoryComponents
} from '@app/sprintship/controller/routes-laboratory/table-routes-laboratory-details.component';

/**** SHARED COMPONENTS ****/
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 '@app/sprintship/controller/drivers/driver-list.component';
import {
    KPIBoxComponent
} from '@app/sprintship/controller/kpi-box/kpi-box.component';
import {
    VehicleListTabComponent
} from '@app/sprintship/controller/vehicles/vehicle-list.component';
import {
    AppSessionService
} from '@shared/common/session/app-session.service';

import {
    GenerateRoutesTrackingComponent
} from './generate-routes-tracking.component';
import {
    interval,
    Subscription
} from 'rxjs';
import * as signalR from '@aspnet/signalr';
import {
    OrderListTabComponent
} from '../orders/order-list.component';

import * as controller_table_settings from '@app/sprintship/controller/core-components/controller-table-settings.json';
import {
    OrderPackagesComponent
} from '@app/sprintship/order-management/order-package-rad/orderPackages.component';
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 {
    ControllerOrderIncidentsComponent
} from '../order-incident/order-incident-list.component';
import {
    ControllerHeaderFlyoutComponent
} from '@app/shared/layout/flyout/controller-header/controller-header-flyout.component';

import {
    RouteDetailModal
} from '@app/sprintship/controller/route-detail/route-detail-modal.component';
// import { CallBackModalComponent } from '@app/sprintship/controller/modals/call_back_modal.component';
// import { CallInModalComponent } from '@app/sprintship/controller/modals/call_in_modal.component';

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

export class CRoutesComponent extends AppComponentBase implements OnInit {

    private hubConnection: signalR.HubConnection

    /***** PAGES *****/
    @ViewChild('routeDetailModal', {
        static: true
    }) routeDetailModal: RouteDetailModal;
    @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('callBackModal', {
        static: false
    }) callBackModal: CallBackModalComponent;
    @ViewChild('callInModal', {
        static: false
    }) callInModal: CallInModalComponent;

    /***** COMPONENTS *****/
    @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(ControllerOrderPackagesComponent, {
        static: false
    }) tOrderPackages: ControllerOrderPackagesComponent;
    @ViewChild(ControllerOrderIncidentsComponent, {
        static: false
    }) tOrderIncidents: ControllerOrderIncidentsComponent;

    /***** MODAL *****/

    /***** STANDARD *****/
    @ViewChild(TableRoutesComponents, {
        static: false
    }) tRouteComponents: TableRoutesComponents;

    /***** LABORATORY *****/
    @ViewChild(TableRoutesLaboratoryComponents, {
        static: false
    }) tRouteLaboratoryComponents: TableRoutesLaboratoryComponents;

    /***** EXTRAS *****/
    @ViewChild('controllerHeaderFlyoutComponent', {
        static: false
    }) controllerHeaderFlyoutComponent: ControllerHeaderFlyoutComponent;
    @ViewChild('dr', {
        static: false
    }) dr: ElementRef;
    @ViewChild('columnChooser', {
        static: false
    }) columnChooser: ControllerShowHideComponent;
    @ViewChild('generateRoutesTracking', {
        static: false
    }) generateRoutesTracking: GenerateRoutesTrackingComponent;
    @ViewChild('createRouteControllerModal', {
        static: false
    }) createRouteControllerModal: CreateRouteControllerModalComponent;

    // @ViewChild(KPIBoxComponent, {static: false}) tKpiBoxComponents: KPIBoxComponent;
    // @ViewChild('callBackModal', {static: false}) callBackModal: CallBackModalComponent;
    // @ViewChild('callInModal', {static: false}) callInModal: CallInModalComponent;

    isEnabledLaboratory: boolean = false;
    controller_edition_type: string = 'STANDARD';

    locations: LocationListDto[] = [];
    hide: boolean = true;
    hide_menu: boolean = true;
    key: number;
    tblMain: any;
    todaysDate: string;
    event: LazyLoadEvent;
    generateEnable: boolean;
    time_interval: number;
    // orderStatusCode: string = undefined;

    filters: {
        locationFilter: number,
        statusFilter: number,
        typeFilter: number,
        startDate: Date,
        endDate: Date,
        orderStatusCode: string,
        filterTxt: string,
        routeId: string,
        routeName: string,
        vehicleName: string,
        driverName: string
    } = < any > {};
    search_string: string;
    txtFilter: string;
    statusLocatorComponent: boolean = false;
    locationName: string;
    orderPackageListComponent: boolean = false;
    orderIncidentListComponent: boolean = false;
    orderListComponent: boolean = false;
    heightTemp: string;
    advancedFiltersAreShown:boolean = false;
    inputs: {
        locationId: number;
        loadDate: Date;
    } = < any > {};
    subscription: Subscription;

    userProfile: {
        name: string,
        surname: string,
        userName: string,
        emailAddress: string,
        phoneNumber: string,
        isPhoneNumberConfirmed: boolean,
        timezone: string,
        qrCodeSetupImageUrl: string,
        isGoogleAuthenticatorEnabled: boolean
    } = < any > {};
    testDate: string;
    currentRoutes: 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,
        private router: Router,
    ) {
        super(injector);

        // this.todaysDate = new Date(Date.now());


        this.generateEnable = false;
        this.isEnabledLaboratory = abp.features.isEnabled('App.ControllerRouteManagementFeature.RouteDetailsManagementFeature');
        if (this.isEnabledLaboratory) {
            this.controller_edition_type = 'LABORATORY';
        }
        this.edition = this.controller_edition_type;

        this.currentRoutes = this.router.url;
        this.currentRoutes = this.currentRoutes.toString().split('/');
        this.currentRoutes = this.currentRoutes[this.currentRoutes.length - 1];

        this.todaysDate = moment(Date.now()).format();
        if (localStorage.getItem('loadDate') == null) {
            localStorage.setItem('loadDate', moment(this.todaysDate).format('YYYY-MM-DD'));
        }
        // this.refresh(null);
    }

    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 timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(timeId);
        let that = this;
        this.time_interval = $('#refreshInterval').val();

        
    
        // this.cHeader.nativeElement.querySelector('.controllerDatePicker1').value = moment(that.todaysDate).format('MM/DD/YYYY');
        // this.cHeader.nativeElement.querySelector('.controllerDatePicker1').value = moment(that.todaysDate).format('MM/DD/YYYY');
        
        if (localStorage.getItem('timeZone') == null) {
            that.locationName = 'Please Select Location ';
        }
        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'));
            }
            //that.tKpiComponents.getKpiCount();
            // that.tRouteComponents.populateTable();
            that.inputs.loadDate = that.filters.startDate;
            that.inputs.locationId = that.filters.locationFilter;
            // localStorage.setItem('loadDate',  moment(that.cHeader.nativeElement.querySelector('.controllerDatePicker1').value).format('YYYY-MM-DD'));

            if (localStorage.getItem('loadDate') == null) {
                localStorage.setItem('loadDate', moment(that.todaysDate).format('YYYY-MM-DD'));
                // 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'));
            } else {
                that.filters.locationFilter = parseInt($('#inputLocation').val());

                //$(".datePicker").text(moment(localStorage.getItem('loadDate')).format('dddd, MMMM DD, YYYY'));
                // $(".datePicker").text(localStorage.getItem('loadDate'));
            }
            that.filters.startDate = moment(localStorage.getItem('loadDate')).toDate();
            that.filters.endDate = moment(localStorage.getItem('loadDate')).toDate();
          
            // that.filterRoutes();
    
            $('.selLocation').select2();


            // that.cRef.nativeElement.querySelectorAll('#tblRoutes .primeng-datatable-container')[0].style.height = "0px";
            // var x = $('.kt-subheader').css('line-height').split('px');

            // var heightTmp = ((x[0]) * 20 + 100);
            // that.heightTemp = heightTmp.toString() + 'px';
            // that.cRef.nativeElement.querySelectorAll('#tblRoutes .primeng-datatable-container')[0].style.height = that.heightTemp;
            that.backgroundProcessListener();
            that.filters.orderStatusCode = "";
            that.refresh(null);
            $("#target").click(function() {
                
            });
            that._timerService.tmrMediator.subscribe(details => {
                if (that.currentRoutes == 'controller-routes') {
                    
                    if (Object.keys(details).length === 2) {
                        //that.filterRoutes();
                    }
                }

            });

        });

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

    }


    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.filters.locationFilter = result.items["0"].id;
                    if (localStorage.getItem('timeZone') == null) {
                        that.locationName = 'Please Select Location ';
                    } else {
                        that.locationName = that.locations['0']['name'];
                    }

                    $("#locationSelectInput").val(result.items["0"].id);
                    that.txtFilter = null;
                    null;
                    null;
                    resolve(result.items["0"].id);

                });
        });
    }


    loadRouteComponent() {
        var that = this;
        switch (this.edition) {
            case 'STANDARD':
                that.tRouteComponents.populateTable();
                break;
            case 'LABORATORY':
                that.tRouteLaboratoryComponents.populateTable();
                break;
            default:
                that.tRouteComponents.populateTable();
                break;
        }

    }
    refreshPage(value: any) {
        // if (value.action === 'CONTROLLER_REFRESH') {
        //     this.filterRoutes();
        // }

    }
    changeInterval(value: any) {

        this.time_interval = value;
    }

    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('-');
    }

    filterRoutes() {
        let key;
       
        if (this.currentRoutes == 'controller-routes') {
            for (key in this.locations) {
                if (this.locations[key].id == this.filters.locationFilter) {
                    $(".location").text(this.locations[key].name + " - ");
                }
            }
          
            // this.cHeader.nativeElement.querySelector('.datePicker').innerHTML = moment(localStorage.getItem('loadDate')).format('dddd, MMMM DD, YYYY');
            // $(".datePicker").text(moment(localStorage.getItem('loadDate')).format('dddd, MMMM DD, YYYY'));
            let that = this;

       

            if ($(".controllerDatePicker1").val()) {
                //this.todaysDate = $(".controllerDatePicker1").val();
                localStorage.setItem('loadDate', $(".controllerDatePicker1").val());
            }

            let nowDate = moment(this.todaysDate).toDate();
            let nowDateMoment = moment(nowDate);

            let duration = {};
            duration['_data'] = {
                'days': 0
            };
            duration = moment.duration(nowDateMoment.diff(this.filters.endDate));


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

                if (duration['_data'].days > 0) {
                    this.generateEnable = true;
                } else {
                    this.generateEnable = false;
                }
            }

            //localStorage.setItem('loadDate', moment(this.filters.endDate).format('YYYY-MM-DD'));
            this.inputs.loadDate = this.filters.endDate;

            this._cRoutesService.setStatistics({
                "result": "OK",
                "total_vehicles": "0",
                "total_packages": "0"
            });
            this.inputs.locationId = that.filters.locationFilter;

            that.tKpiComponents.getKpiCount();


            switch (this.cRef.nativeElement.querySelector('.nav-tabs .active a span').innerText) {
                case 'Routes':
                    switch (this.edition) {
                        case 'STANDARD':
                            that.tRouteComponents.populateTable();
                            break;
                        case 'LABORATORY':
                            that.tRouteLaboratoryComponents.populateTable();
                            break;
                        default:
                            that.tRouteComponents.populateTable();
                            break;
                    }
                    break;
                case 'Orders':
                    that.tOrderComponents.getOrder();
                    break;
                case 'Packages':
                    that.tOrderPackages.getOrderPackages();
                    break;
                case 'Vehicles':
                    that.vehicleTab.getVehicleList();
                    break;
                case 'Drivers':
                    that.driverTab.getDriverList();
                    break;
                case 'Incidents':
                    that.tOrderIncidents.getOrderIncident();
                    break;
                default:
                    switch (this.edition) {
                        case 'STANDARD':
                            that.tRouteComponents.populateTable();
                            break;
                        case 'LABORATORY':
                            that.tRouteLaboratoryComponents.populateTable();
                            break;
                        default:
                            that.tRouteComponents.populateTable();
                            break;
                    }
                    break;
            }

            //this.cHeader.nativeElement.querySelector('.datePicker').innerHTML = moment(localStorage.getItem('loadDate')).format('dddd, MMMM DD, YYYY');
           
            // this.cHeader.nativeElement.querySelector('.datePicker').innerHTML = localStorage.getItem('loadDate');
        }
    }

    loadDriverListComponent() {
        //this.driverListComponent = true;
  
        this.driverTab.getDriverList();
    }
    loadVehicleListComponent() {
        // this.tVehicleComponents.getVehicleList();
        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(undefined);
     
    }

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

    getSelected() {
  
        let elements = this.elem.nativeElement.querySelectorAll('.checkboxItem');
  
    }
    filterRoutesByParameters() {
   
        this.search_string = this.txtFilter;

        switch (this.edition) {
            case 'STANDARD':
                this.tRouteComponents.setFilter(this.txtFilter);
                this._cRoutesService.setStatistics({
                    "result": "OK",
                    "total_vehicles": "0",
                    "total_packages": "0"
                });
                this.tRouteComponents.populateTable();
                break;
            case 'LABORATORY':
                this.tRouteLaboratoryComponents.setFilter(this.txtFilter);
                this._cRoutesService.setStatistics({
                    "result": "OK",
                    "total_vehicles": "0",
                    "total_packages": "0"
                });
                this.tRouteLaboratoryComponents.populateTable();
                break;
            default:
                this.tRouteComponents.setFilter(this.txtFilter);
                this._cRoutesService.setStatistics({
                    "result": "OK",
                    "total_vehicles": "0",
                    "total_packages": "0"
                });
                this.tRouteComponents.populateTable();
                break;

        }

    }


    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.generateRoutesTracking.logMessage(message, true);
            } else {

                this.generateRoutesTracking.logMessage(message);
            }
        });
    }
    showCreateRoutes() {
        this.createRouteControllerModal.show();
    }
    showCallBack() {
        this.callBackModal.show();
    }
    showCallIn() {
        this.callInModal.show();
    }
    refresh(event: any) {
        this.filterRoutes();
    }
    async generateRoute() {
        this.generateRoutesTracking.clearMessages();

        // this.filters.startDate = this.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
        // this.filters.endDate = this.cHeader.nativeElement.querySelector('.controllerDatePicker').value;
        // 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.generateRoutesTracking.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.generateRoutesTracking.complete();

                            observable.unsubscribe();

                            this.filterRoutes();
                        }
                    });
                });
            }
        }
    }

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

}