import { Component, Injector, OnInit, ViewChild, ViewEncapsulation, ElementRef, AfterViewInit, Renderer } from '@angular/core';
import { ActivatedRoute } 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,
         LocationListDto,
         LocationServiceProxy,
         ControllerRouteServiceProxy,
        //  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';

import { TableRoutesComponents } from './table-routes-details.component';

declare var $: any;
declare var jquery:any;
@Component({
    templateUrl: 'croutes.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./croutes.component.less'],
    animations: [appModuleAnimation()]
})

export class CRoutesComponent extends AppComponentBase implements OnInit {

    @ViewChild('controllerTab', { static: false }) staticTabs: TabsetComponent;
    @ViewChild(TableRoutesComponents, {static: false}) tRouteComponents: TableRoutesComponents;
    @ViewChild('dr', { static: false }) dr : ElementRef;
    

    locations: LocationListDto[] = [];
    hide: boolean = true;
    key: number;
    tblMain: any;
    todaysDate: Date;

    filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: Date;
        endDate: Date;
    } = <any>{};
    driverListComponent: boolean = false;
    statusLocatorComponent: boolean = false;

	constructor(
        injector: Injector,
        private _controllerRouteService: ControllerRouteServiceProxy,
        private _locationServiceProxy: LocationServiceProxy,
        private _routeService: RouteServiceProxy,
        private renderer: Renderer, 
        private elem: ElementRef
    ) {
        super(injector);

        this.todaysDate = new Date(Date.now());
        this.filters.startDate = this.todaysDate;
        this.filters.endDate = this.todaysDate;
    }

    hideKpi(): void {
     
        if (this.hide == true)
        {
            this.hide = false;
        } 
        else 
        {
            this.hide = true;
        }
    }

    ngOnInit(): void {
        let that = this;
        this.todaysDate = new Date(Date.now());
        this.spinnerService.show();
        this.getLocationsOnLoad().then(function(result){
            that.filters.startDate = that.todaysDate;
            that.filters.endDate = that.todaysDate;
            $('#kt_daterangepicker_2 .form-control').val( moment(that.todaysDate).format('YYYY-MM-DD') + ' / ' + moment(that.todaysDate).format('YYYY-MM-DD'));
            
            that.tRouteComponents.populateTable();
            that.spinnerService.hide();
        });
        
        $('.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();
        });
        
    }
    onShown(): void {
        
    }

    getLocationsOnLoad()
    {
        let that = this;
        return new Promise(function(resolve, reject){
            that._locationServiceProxy.getLocation(undefined, undefined, undefined, undefined, undefined)
                .subscribe(result => {
                    that.locations = result.items;
                    that.filters.locationFilter = result.items[0].id;
                    $("#locationSelectInput").val(result.items[0].id);
                    resolve(result.items[0].id);
                });
        });
    }
    
    loadLocatorComponent(){
        this.filters.startDate = $('#hiddenStartDate').val();
        this.filters.endDate = $('#hiddenEndDate').val();
        this.filters.locationFilter = $("#locationSelectInput").val();
        this.statusLocatorComponent = true;
    }

    loadRouteComponent(){
        this.statusLocatorComponent = false;
    }
    filterRoutes()
    {

        var that = this;
        that.filters.startDate = that.todaysDate;
        that.filters.endDate = that.todaysDate;
        that.filters.locationFilter = $("#locationSelectInput").val();
        that.tRouteComponents.populateTable();
    }
    loadDriverListComponent(){
        this.driverListComponent = true;
    }
    getSelected()
    {
        console.log('T COMPONENTS: ');
       
       
        let elements = this.elem.nativeElement.querySelectorAll('.checkboxItem');
        console.log(elements);
    }
}