import { Component, EventEmitter, Injector, ViewChild, Output,Input } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap';
import { ControllerRouteDetailServiceProxy,OrderServiceProxy,ControllerMoveOrderInput,ListResultDtoOfControllerGetAllAvailabelRouteDto} from '@shared/service-proxies/service-proxies';
import { PrimengTableHelper } from 'shared/helpers/PrimengTableHelper';
import{HFRouteDetailComponent} from './hf-route-detail.component';
import { finalize } from 'rxjs/operators';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from "primeng/table";
import * as jquery from 'jquery';
import * as moment from 'moment';
// import * as DualListbox from 'dual-listbox';
@Component({
    templateUrl: './move-order-modal.component.html',
    selector: 'MovePendingOrder'
})
export class MovePendingOrder extends AppComponentBase {

   @ViewChild('movePendingOrderModal', {static: false}) modal: ModalDirective;
   @Output() reloadTable: EventEmitter<any> = new EventEmitter<any>();
   @Input('selectedRouteId') selectedRouteId: number;
   @ViewChild("paginator", {static: true}) paginator: Paginator;
   @ViewChild("dataTable", {static: true}) dataTable:Table;
   @Input() refreshRoute:Function
//    @Input() updateTable:Function

    reload:boolean = false;
    active = false;
    saving = false;
    loadDate: any
    timeId: any;
    orderIds: Array<any> = new Array;
    routeId: any;
    routeDate: any
    routeList : ListResultDtoOfControllerGetAllAvailabelRouteDto = new ListResultDtoOfControllerGetAllAvailabelRouteDto();
    moveInput: ControllerMoveOrderInput = new ControllerMoveOrderInput();
    constructor(
        injector: Injector,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _controllerOrderService: OrderServiceProxy,
    ) {
        super(injector);
    }

    ngOnInit(){

        this.timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(this.timeId);
    }

    show(orderId?: number, routeId?: number) {
        console.log(routeId)
        this.loadDate = localStorage.getItem('loadDate');
        this._controllerRouteDetails.getAvailableRoute(moment.utc(this.loadDate), parseInt(localStorage.getItem('operatingLocationId')), routeId).subscribe(result=>{
            this.routeList = result;
            
            // console.log(result);
        });
        this.active = true;
        this.modal.show();
        if(orderId != null){
            this.orderIds = [];
            this.orderIds.push(orderId)
            console.log(this.orderIds)
        }
        // this.orderIds = orderId
        
        
       
        
    }

    onShown(): void {
        let e = this;
        $('.kt-select2').select2();
        // $('#selectedRouteId').on('select2:select', function (v) {
        //     if($('#orderListIds').val() !== ""){
        //         e.moveOrders(Number((<HTMLInputElement>document.getElementById('selectedRouteId')).value),$('#orderListIds').val());
        //     } else{
        //         e.notify.info(e.l('Select orders to move'));
        //     }
            
        // });

    }

    acceptOrderId($event){
        this.orderIds = $event
    }

    applyMove(){
        // console.log($('#orderListIds').val())
        if(this.orderIds != null){
            console.log(Number((<HTMLInputElement>document.getElementById('selectedRouteId')).value))
            this.moveOrders(Number((<HTMLInputElement>document.getElementById('selectedRouteId')).value),this.orderIds);
            this.notify.info(this.l('SavedSuccessfully'));
            this.refreshRoute();
            this.close();
            
        } else{
            this.notify.info(this.l('Select orders to move'));
        }
        
    }


    moveOrders(routeId:number,ids:any){
        this.spinnerService.show();
        this.moveInput.routeId = routeId;
        this.moveInput.id = this.orderIds;
        this._controllerOrderService.moveOrder(this.moveInput)
        .pipe(finalize(() => this.saving = false))
        .subscribe(() => { 
            
            this.moveInput.id.forEach(element => {
                $('#'+element).remove();
            });
            this.spinnerService.hide();
            // this.updateTable();
        });
    }

    close(): void {
        this.active = false;
        this.modal.hide();
        this.reload = true;
        this.reloadTable.emit(this.reload); 
    }
}