import { Component, Injector, OnInit, ViewChild, ViewEncapsulation } 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
// } from '@shared/service-proxies/service-proxies';

import * as moment from 'moment';
import { Table } from "primeng/table";
import { LazyLoadEvent } from "primeng/primeng";
import { Paginator } from 'primeng/components/paginator/paginator';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs/operators';
import * as _ from 'lodash';
declare var $: any;
declare var jquery:any;
@Component({
    templateUrl: 'route-detail.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./route-detail.component.less'],
    animations: [appModuleAnimation()]
})

export class RouteDetailComponent extends AppComponentBase implements OnInit {

    details:boolean = false;
    @ViewChild("dataTable", {static: true}) dataTable:Table
    @ViewChild("paginator", {static: true}) paginator: Paginator

    // locations: LocationListDto[] = [];
	constructor(
        injector: Injector
        // private _locationServiceProxy: LocationServiceProxy,
        // private _routeService: RouteServiceProxy
        
    ) {
        super(injector);
    }

    ngOnInit(){
        // $('.kt-select2').select2();
        // $('.selectpicker').selectpicker();
    }

    getRouteDetails(event?: LazyLoadEvent) {
        if (this.primengTableHelper.shouldResetPaging(event)) {
            this.paginator.changePage(0);
            return;
        }

        this.spinnerService.show();

        this.primengTableHelper.getSorting(this.dataTable),
        this.primengTableHelper.getMaxResultCount(this.paginator, event),
        this.primengTableHelper.getSkipCount(this.paginator, event)
        this.primengTableHelper.totalRecordsCount = 3;
        // dummy data
        this.primengTableHelper.records = [
            {
             sortId:8,
             orderId:8,
             action:"Delivery",
             zone:8,
             deliveryDetail:{
                 fullName:"Eight Otso",
                 address:"8th street corner 8 ave",
                 detail1:"Austin, TX, 88888",
                 detail2:"eight@otsomail.com",
                 detail3:"88888888888888888888888888888",
                 detail4:"88888888OOFFDD888",
                 detail5:"2018-08-08",
                 detail6:"88888888OOFFDD888"
             },
             log:{
                 detail1:"Delivered",
                 detail2:"08/08/2018",
                 detail3:"8:08am"
             },
             est:"8:08pm",
             distance:"8.8",
             securityCode:"88888888"
            },
            {
             sortId:8,
             orderId:8,
             action:"Delivery",
             zone:8,
             deliveryDetail:{
                 fullName:"Eight Otso",
                 address:"8th street corner 8 ave",
                 detail1:"Austin, TX, 88888",
                 detail2:"eight@otsomail.com",
                 detail3:"88888888888888888888888888888",
                 detail4:"88888888OOFFDD888",
                 detail5:"2018-08-08",
                 detail6:"88888888OOFFDD888"
             },
             log:{
                 detail1:"Delivered",
                 detail2:"08/08/2018",
                 detail3:"8:08am"
             },
             est:"8:08pm",
             distance:"8.8",
             securityCode:"88888888"
            },
            {
                sortId:8,
                orderId:8,
                action:"Delivery",
                zone:8,
                deliveryDetail:{
                    fullName:"Eight Otso",
                    address:"8th street corner 8 ave",
                    detail1:"Austin, TX, 88888",
                    detail2:"eight@otsomail.com",
                    detail3:"88888888888888888888888888888",
                    detail4:"88888888OOFFDD888",
                    detail5:"2018-08-08",
                    detail6:"88888888OOFFDD888"
                },
                log:{
                    detail1:"Delivered",
                    detail2:"08/08/2018",
                    detail3:"8:08am"
                },
                est:"8:08pm",
                distance:"8.8",
                securityCode:"88888888"
               }
        ];
        this.spinnerService.hide();
    }

    toggleMoreInfo(event){
        var element = event.currentTarget.nextSibling;
        var selector = document.querySelectorAll('.more-info-container.active');
        var hover = document.querySelectorAll('.more-btn.hover');

        

        if(element.classList.contains('active')){
            event.currentTarget.classList.remove('hover');
            element.classList.remove('active');
        } else {
            if(selector.length > 0){
                selector[0].classList.remove('active');
                hover[0].classList.remove('hover');
                // event.currentTarget.classList.remove('hover');
            } 
            element.classList.add('active');
            event.currentTarget.classList.add('hover');
        }

    }

    toggleDetails(){

        this.details = !this.details;

        console.log(this.details);
    }

    ngAfterViewInit(){

        $('.kt-select2').select2();
        $('.selectpicker').selectpicker();
    }

    onShown(){
        
    }


}