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,RouteServiceProxy,UpdateRouteInput,VehicleServiceProxy} from '@shared/service-proxies/service-proxies';
import { PrimengTableHelper } from 'shared/helpers/PrimengTableHelper';
import { finalize } from 'rxjs/operators';
import * as jquery from 'jquery';
import * as moment from 'moment';
// import * as DualListbox from 'dual-listbox';
@Component({
    templateUrl: './route-detail-modal.component.html',
    selector: 'routeDetailModal'
})
export class RouteDetailModal extends AppComponentBase {

   @ViewChild('routeDetail', {static: false}) modal: ModalDirective;
   @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
   @Input('selectedDriverId') selectedDriverId: number;
//    @Input('selectedVehicleId') selectedVehicleId: number;


    active = false;
    saving = false;
    loadDate: any;
    startTime: any;
    endTime: any;
    departure:any;
    completion:any;
    driverList: any[];
    vehicleList: any[];
    driverId:number;
    locationId:number;
    routeTemplateId:number;
    locked:boolean;
    route: UpdateRouteInput = new UpdateRouteInput();
    routeId:number;
    selectedVehicleId: number;
    constructor(
        injector: Injector,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _controllerRoute: RouteServiceProxy,
        private _controllerVehicle: VehicleServiceProxy,
    ) {
        super(injector);
    }

    ngOnInit(){
       
    }

    show(routeID ?:number):void {

        this._controllerRouteDetails.getDriverList().subscribe(result=>{
            this.driverList = result;
        });

        this._controllerRouteDetails.getVehicleList().subscribe(result=>{
            this.vehicleList = result;
        });
        
        this._controllerRouteDetails.getControllerRouteDetail(routeID)
        .subscribe(result => {
            this.routeId = routeID;
            this.routeTemplateId = result.routeTemplateId;
            this.locationId = result.location.id;
            this.loadDate =  moment(result.loadDate).format("YYYY-MM-DD");
            this.startTime =  moment(result.departure).format("hh:mm a");
            this.endTime =  moment(result.completion).format("hh:mm a");
            this.completion =  result.completion ? moment(result.completion).format("YYYY-MM-DD hh:mm:ss") : '';
            this.departure =   result.departure ? moment(result.departure).format("YYYY-MM-DD hh:mm:ss") : '';
            this.locked = result.locked;
            this.selectedDriverId = result.vehicle.userId;
            this.selectedVehicleId = result.vehicle.id;
        this.active = true;
        this.modal.show();
           
        });
        
    }

    onShown(): void {
        let s = this;
        $('.kt-select2').select2();

        $('#selectedVehicleId').on('select2:select', function (e) {
            s.updateRoute();
        });

        $('#selectedDriverId').on('select2:select', function (e) {
            s.updateVehicle();
        });

        

    }

    updateRoute(){
        this.route.vehicleId = Number((<HTMLInputElement>document.getElementById('selectedVehicleId')).value);
        this.route.routeTemplateId = this.routeTemplateId;
        this.route.locationId = this.locationId;
        this.route.completion = this.completion ?  moment.utc(moment(this.completion).format('YYYY-MM-DD[T]HH:mm:ss')) : null;
        this.route.departure = this.departure ? moment.utc(moment(this.departure).format('YYYY-MM-DD[T]HH:mm:ss')) : null  ;
        this.route.loadDate = moment.utc(moment(this.loadDate).format('YYYY-MM-DD'));
        this.route.locked = this.locked;
        this.route.id = this.routeId;
        this._controllerRoute.updateRoute(this.route)
                    .pipe(finalize(() => this.saving = false))
                    .subscribe(() => { 
                        this.notify.info(this.l('SavedSuccessfully'));
        });
        console.log(this.route);
    }

    updateVehicle(){

        this._controllerVehicle.getVehicleForEdit(Number((<HTMLInputElement>document.getElementById('selectedVehicleId')).value))
            .subscribe(result=>{
                result.vehicle.userId = Number((<HTMLInputElement>document.getElementById('selectedDriverId')).value);

                this._controllerVehicle.updateVehicle(result.vehicle)
                    .pipe(finalize(() => this.saving = false))
                    .subscribe(() => {
                        this.notify.info(this.l('SavedSuccessfully'));
                    });
        });
    }
    setDeparture(){
        if(this.departure){
            this.departure = '';
            this.startTime = '';
        } else {
            this.departure = moment(new Date()).format('YYYY-MM-DD h:m:ss a');
            this.startTime = moment(new Date()).format('h:m a');
        }
        
        this.updateRoute();
    }

    setCompletion(){

        if(this.completion){
            this.completion = '';
            this.endTime = '';
        } else {
            this.completion = moment(new Date()).format('YYYY-MM-DD h:m:ss a');
            this.endTime = moment(new Date()).format('h:m a');
        }
        this.updateRoute();
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }
}