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 { RemoveOrderList,RemoveOrderInput,ControllerRouteDetailServiceProxy, OrderServiceProxy, UpdateOrderSortingInput, UpdateOrderSorting, AddressTypeServiceProxy, AddressTypesServiceProxy, RouteServiceProxy, RouteDetailsKpi } 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 { DOCUMENT } from '@angular/common';
import { RouteDetailAttachment } from './route-detail-attachment.component';
import { OrderNotes } from './order-notes.component';
import * as moment from 'moment-timezone';

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

export class HFRouteDetailComponent extends AppComponentBase implements OnInit {

    routeId: number = null;
    filterText = '';
    sprintIds: Array<{}> = new Array();
    sprintIdsList: any[];
    orderList: Array<any> = [];

    orderListInput: UpdateOrderSortingInput = new UpdateOrderSortingInput();
    orderKpiList: any;
    checkAll: boolean;
    evaluator = false;
    tbodyHolder: any;
    records: any;
    newRemoveOrderInput: Array<any> = [];
    saving = false;
    advancedFiltersAreShown = false;
    addressTypes : any;
    addressTypesFilter : any
    sortOrderVisibility : boolean = true;
    orderSourceId = undefined;
    active: any;
    hide: boolean = false;
    
    headerKpiClass: Array<string> = ['green', 'amber', 'red','green1', 'amber1', 'red1','green2', 'amber2', 'red2']; 

    @ViewChild("dataTable", { static: true }) dataTable: Table;
    @ViewChild("paginator", {static: true}) paginator: Paginator;
    @ViewChild('routeDetailAttachment', { static: true }) routeDetailAttachment: RouteDetailAttachment;
    @ViewChild('orderNotes', { static: true }) orderNotes: OrderNotes;
    @Input() refresh: any;

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

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

    ngOnInit() {
        this.getRouteDetails();
        this.primengTableHelper.showLoadingIndicator();
        this.getAddressTypes();
        this.getOrderListKpi()
        
        // this.spinnerService.show();
    }
    tableRow() {
        this.tbodyHolder = document.getElementsByTagName('tbody')[0].rows;
    }

    getRouteDetails(event?: LazyLoadEvent) {
        this.CheckIfVendor();
        this.addressTypesFilter =  $("#HfAdressType").val() == 0 ? undefined : $("#HfAdressType").val()
        //   this._controllerRouteDetails
        //     .getControllerRouteDetailList(
        //         this.routeId,
        //         this.filterText)
        //     .subscribe(result => {
        //         this.primengTableHelper.totalRecordsCount = result.items.length;
        //         this.primengTableHelper.records = result.items;
        //         // this.spinnerService.hide();
        //         this.primengTableHelper.isLoading = false;
        //     });
        this.spinnerService.show();
        
        this._controllerRouteDetails
            .getRouteOrderDetailList(
                this.routeId,
                this.filterText,
                this.addressTypesFilter,
                this.orderSourceId)
            .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()
            });
    }

    CheckIfVendor(){
        this._controllerRouteDetails.vendorChecker().subscribe(result=>{
            this.sortOrderVisibility = result;
        })
    }


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

        this.orderList = [];
        for (let index = 0; index < this.primengTableHelper.records.length; index++) {
            var element = this.primengTableHelper.records[index];

            // console.log(element)
            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
        })

        this._orderAppService.updateOrderSorting(
            input
        ).pipe().subscribe(result => {
            this.notify.info(this.l('SavedSuccessfully'));
        })
    }

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

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

        this.sprintIdsList = this.sprintIds;
        this.passOrderIds.emit(this.sprintIdsList);
        this.passOrderIdsForRoute.emit(this.sprintIdsList);

    }


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

    onShown() {
    }

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

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

    }

    removeStop(): void {

        let that = this;
        that.newRemoveOrderInput = [];
        this.sprintIdsList.forEach(function (value, i) {

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

            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();
                this.getOrderListKpi();

            });

    }

    getAddressTypes(){
        this._addressTypeService.getAllAddressTypes()
            .pipe()
            .subscribe(result =>{
                this.addressTypes = result;
            })
    }

    getOrderListKpi(){
        this._routeAppService.getRouteDetailKpi(this.routeId)
            .pipe()
            .subscribe(result =>{
                this.orderKpiList = result;
            })
    }

    filterKpiBox(filter: string, sourceID: number) {
        $('.filter-right').removeClass('active');

        if (this.active == filter) {
            $('.source-'+filter).removeClass('active');
            this.active = undefined;
            this.orderSourceId = undefined;
        }else{
            $('.source-'+filter).addClass('active');
            this.active = filter;
            this.orderSourceId = sourceID;
        }
        if(sourceID == 0)
        {    
            this.orderSourceId = undefined;
        }
        this.getRouteDetails();
        
    }

    hideKpiDropdown(): void {
        if (this.hide == true) {
            this.hide = false;

            $('#kpiToggleLink').html('Show KPI');

        } else {
            this.hide = true;

            $('#kpiToggleLink').html('Hide KPI');
        }

    }

}