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() updateTable:Function

    reload:boolean = false;
    active = false;
    saving = false;
    routeList : ListResultDtoOfControllerGetAllAvailabelRouteDto = new ListResultDtoOfControllerGetAllAvailabelRouteDto();
    moveInput: ControllerMoveOrderInput = new ControllerMoveOrderInput();
    constructor(
        injector: Injector,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _controllerOrderService: OrderServiceProxy,
    ) {
        super(injector);
    }

    ngOnInit(){
        
    }

    show():void {
        var loadDate = localStorage.getItem('loadDate');

        this._controllerRouteDetails.getAvailableRoute(moment(loadDate)).subscribe(result=>{
            this.routeList = result;

            console.log(result);
        });
        this.active = true;
        this.modal.show();
       
        
    }

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

    }

    applyMove(){
        if($('#orderListIds').val() !== ""){
            this.moveOrders(Number((<HTMLInputElement>document.getElementById('selectedRouteId')).value),$('#orderListIds').val());

            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 = ids.split(',');
        this._controllerOrderService.moveOrder(this.moveInput)
        .pipe(finalize(() => this.saving = false))
        .subscribe(() => { 
            this.notify.info(this.l('SavedSuccessfully'));
            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);
        
    }
}