import { Component, Injector, OnInit, ViewChild, ViewEncapsulation, Output, EventEmitter, Input, Inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ControllerRouteDetailServiceProxy, OrderServiceProxy,AddressIdInput,DriverProximityServiceProxy,AcceptProximityInput, UpdateOrderSortingInput, UpdateOrderSorting, RemoveOrderInput, RemoveOrderList } from '@shared/service-proxies/service-proxies';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { Table } from "primeng/table";
import { LazyLoadEvent } from "primeng/primeng";
import { Paginator } from 'primeng/components/paginator/paginator';
import { finalize } from 'rxjs/operators';
import * as _ from 'lodash';
import * as moment from 'moment-timezone';
import { DOCUMENT } from '@angular/common';
import { Element } from '@angular/compiler';
import { RouteDetailAttachment } from './route-detail-attachment.component';
import { OrderNotes } from './order-notes.component';
declare var $: any;
declare var jquery: any;
@Component({
    selector: 'fbx-route-detail',
    templateUrl: 'fbx-route-detail.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./route-detail.component.less'],
    animations: [appModuleAnimation()]
})

export class FBXRouteDetailComponent extends AppComponentBase implements OnInit {

    routeId: number = null;
    filterText = '';
    sprintIds: Array<{}> = new Array();
    sprintIdsList: any[];
    orderList: Array<any> = [];
    // orderGroup: Array<{id:number,data:Array<any>}> = [];
    orders: any;
    contactList: [];
    saving = false;
    newRemoveOrderInput: Array<any> = [];

    orderListInput: UpdateOrderSortingInput = new UpdateOrderSortingInput();
    checkAll: boolean;
    evaluator = false;
    tbodyHolder: any;
    records: any;
    deliveryGroup = {};
    pickupGroup = [];

    @ViewChild("dataTable", { static: true }) dataTable: Table;
    @ViewChild("paginator", { static: true }) paginator: Paginator;
    @Input() refresh: any;

    @Output() passOrderIds: EventEmitter<any> = new EventEmitter();
    @Output() passOrderIdsForRoute: EventEmitter<any> = new EventEmitter();

    @ViewChild('routeDetailAttachment', { static: true }) routeDetailAttachment: RouteDetailAttachment;
    @ViewChild('orderNotes', { static: true }) orderNotes: OrderNotes;

    // updateTable: Function;
    constructor(
        injector: Injector,
        private id: ActivatedRoute,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _appSessionService: AppSessionService,
        private _orderAppService: OrderServiceProxy,
        private _proximityCodeService:DriverProximityServiceProxy,
        private router: Router,
    ) {
        super(injector);
        //  tableDragger(document.querySelector("#dragTable"), { mode: "row", onlyBody: true })
        this.id.paramMap.subscribe(params => {
            this.routeId = Number(params.get('id'));
        });

    }

    ngOnInit() {
        moment.tz.setDefault(localStorage.getItem('timeZoneId'));
        moment().tz(localStorage.getItem('timeZoneId')).format();
    }
    tableRow() {
        this.tbodyHolder = document.getElementsByTagName('tbody')[0].rows;
    }

    getRouteDetails(event?: LazyLoadEvent) {
        this.spinnerService.show()

        this._controllerRouteDetails
            .getRouteOrderDetailList(
                this.routeId,
                this.filterText,
                undefined,
                undefined)
            .subscribe(result => {

                for (let index = 0; index < result.length; index++) {
                    result[index].deliveryTime = result[index].estimatedTimeOfArrival.utcOffset(moment.parseZone(result[index].estimatedTimeOfArrival).utcOffset()).format('h:mm A');
                    if(result[index].orderStatus){
                        result[index].arriveTime = result[index].orderStatus.time.utcOffset(moment.parseZone(result[index].orderStatus.time).utcOffset()).format('h:mm A');
                    }
                }
                
                this.primengTableHelper.totalRecordsCount = result.length;
                this.primengTableHelper.records = result;
                this.primengTableHelper.isLoading = false;
                this.spinnerService.hide()
            });
    }



    rowReorder() {
        this.tbodyHolder = null
        this.tableRow();

        this.orderList = [];
        for (let index = 0; index < this.primengTableHelper.records.length; index++) {
            var element = this.primengTableHelper.records[index];
            // if (element.length < 2) {
                let a = new UpdateOrderSorting({
                    id: parseInt(element.id),
                    sortOrder: index
                })
                this.orderList.push(a);
            // }

        }
        let input = new UpdateOrderSortingInput({
            sortingOrderInput: this.orderList,
            sortingRouteTemplateAddressInput: null,
            sortingRouteScheduleDetailInput: null
        })
        console.log(this.orderList)
        this._orderAppService.updateOrderSorting(
            input
        ).pipe().subscribe(result => {
            this.notify.info(this.l('SavedSuccessfully'));
            this.getRouteDetails()
        })
    }

    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');
            }
            element.classList.add('active');
            event.currentTarget.classList.add('hover');
        }

    }

    moveOrders(id: number) {
        if (this.sprintIds.indexOf(id) == -1) {
            this.sprintIds.push(id);
        } else {
            this.sprintIds.splice(this.sprintIds.indexOf(id), 1);
        }

        this.sprintIdsList = this.sprintIds;
        
        console.log(this.sprintIdsList)
        this.passOrderIds.emit(this.sprintIdsList);
        this.passOrderIdsForRoute.emit(this.sprintIdsList);
    }


    // selectAllOrders() {
    //     this.sprintIdsList = null;
    //     this.records = this.primengTableHelper.records

        

    //     for (var i = 0; i < this.records.length - 1; i++) {
            
    //         if (this.checkAll == true) {
    //             this.sprintIds.push(this.records[i].id);
    //             this.records[i].selected = this.checkAll;
    //         }
    //         else {
    //             this.sprintIds.splice(this.sprintIds.indexOf(this.records[i].id), 1);
    //             this.records[i].selected = this.checkAll;
    //         }
    //     }
    // }

    selectAllOrders() {
        this.sprintIdsList = null;
        this.records = this.primengTableHelper.records

        for (var i = 0; i <= this.records.length - 1; i++) {
            
            if (this.checkAll == true && 
                (this.records[i].pickUp == false && 
                 this.records[i].delivered == false && 
                 !this.records[i].markedAsDelivered)) {
                this.sprintIds.push(this.records[i].id);
                this.records[i].selected = this.checkAll;
            }
            else {
                if(this.sprintIds.indexOf(this.records[i].id) > -1)
                {
                    this.sprintIds.splice(this.sprintIds.indexOf(this.records[i].id), 1);
                this.records[i].selected = this.checkAll;
                }
                // this.sprintIds.splice(this.sprintIds.indexOf(this.records[i].id), 1);
                // this.records[i].selected = this.checkAll;
                // console.log("else")
            }

            this.sprintIdsList = this.sprintIds;
            console.log(this.sprintIdsList)
            this.passOrderIds.emit(this.sprintIdsList);
            this.passOrderIdsForRoute.emit(this.sprintIdsList)
        }
    }

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


    singleRemoveStop(orderId: number) {
        this.sprintIdsList = []
        this.message.confirm(
            '',
            '',
            (isConfirmed) => {
                this.sprintIdsList.push(orderId)
                if (isConfirmed) {
                    this.removeStop();
                }
            }
        );

    }

    removeStop(): void {

        let that = this;
        // console.log("remove stops")
        // console.log(this.sprintIdsList)
        that.newRemoveOrderInput = [];
        this.sprintIdsList.forEach(function (value, i) {

            let removeOrderInput = new RemoveOrderInput({
                id: parseInt(value),
                routeId: 0
            });

            that.newRemoveOrderInput.push(removeOrderInput);
        });


        let updateRouteIdInput = new RemoveOrderList({
            removeOrderInput: that.newRemoveOrderInput
        });



        this._orderAppService.updateRouteId(updateRouteIdInput)
            .pipe(finalize(() => { this.saving = false; }))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.getRouteDetails();

            });

    }

    expand(event, id): void {
        var target = event.currentTarget;
        var lastActive = document.querySelectorAll('.tr-' + id);
        var container = document.querySelectorAll('.tr-container');

        if (target.classList.contains('active')) {
            target.classList.remove('active');
            target.children[0].textContent = 'Expand';
            target.children[1].classList.add('pi-chevron-right');
            target.children[1].classList.remove('pi-chevron-down');

            container.forEach(element => {
                element.classList.add('tr-expansion-hide');
            });

            document.querySelectorAll('.tr-header').forEach(function (index) {
                index.classList.remove('inactive-header');
            });


        } else {
            document.querySelectorAll('.tr-header').forEach(function (index) {
                index.classList.add('inactive-header');
            });

            target.closest('tr').classList.remove('inactive-header');
            target.closest('tr').classList.add('active-header');

            var selector = document.querySelectorAll('.tr-selector.active');

            if (selector.length > 0) {
                selector[0].classList.remove('active');
                selector[0].children[0].textContent = 'Expand';
                selector[0].children[1].classList.remove('pi-chevron-down');
                selector[0].children[1].classList.add('pi-chevron-right');


                container.forEach(element => {
                    element.classList.add('tr-expansion-hide');
                });
            }

            target.classList.add('active');
            target.children[0].textContent = 'Collapse';
            target.children[1].classList.remove('pi-chevron-right');
            target.children[1].classList.add('pi-chevron-down');



            lastActive.forEach(element => {
                element.classList.remove('tr-expansion-hide');
            });
        }
    }

    proximity(clinic: string, addressId: number, lat: string, lon: string, orderId: number): void {
        this.message.confirm(
            'You are updating ' + clinic + ' geocoordinates with ' + lon + ', ' + lat + '?',
            '',
            (isConfirmed) => {

                if (isConfirmed) {
                    var data = new AddressIdInput;
                    data.id = addressId;
                    data.orderId = orderId;
                    this._controllerRouteDetails.updateClinicGeocode(data)
                        .pipe(finalize(() => { this.saving = false; }))
                        .subscribe(() => {
                            var acceptProximity = new AcceptProximityInput;
                            acceptProximity.orderId = orderId;
                            this._proximityCodeService.acceptProximity(acceptProximity)
                                .pipe(finalize(() => { this.saving = false; }))
                                .subscribe(() => {
                                    this.notify.info(this.l('SavedSuccessfully'));
                                });
                        });
                }
            }
        );
    }

    orderAttachments(id: number) {
        this.routeDetailAttachment.show(id);
    }



}