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 { formatDate } from '@angular/common';
// 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: any;
    @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;
    attribute = false;
    // 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.loadDate = localStorage.getItem('loadDate');
                //  new Date().
                // moment().format("YYYY-MM-DD");
                this.startTime = result.departure ? moment(result.departure).format("hh:mm a") : '';
                this.endTime = result.completion ? moment(result.completion).format("hh:mm a") : '';
                this.completion = result.completion ? moment(result.completion).format("YYYY-MM-DD hh:mm a") : '';
                this.departure = result.departure ? moment(result.departure).format("YYYY-MM-DD hh:mm a") : '';
                this.locked = result.locked;
                if (result.vehicle) {
                    this.selectedDriverId = result.vehicle.userId;
                    this.selectedVehicleId = result.vehicle.id;
                }

                this.active = true;
                this.modal.show();

            });

    }

    // routeDetails(routeID){
    //     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 =  result.departure ? moment(result.departure).format("hh:mm a") : '';
    //         this.endTime =  result.completion ? moment(result.completion).format("hh:mm a") : '';
    //         this.completion =  result.completion ? moment(result.completion).format("YYYY-MM-DD hh:mm a") : '';
    //         this.departure =   result.departure ? moment(result.departure).format("YYYY-MM-DD hh:mm a") : '';
    //         this.locked = result.locked;
    //         if(result.vehicle){
    //             this.selectedDriverId = result.vehicle.userId;
    //             this.selectedVehicleId = result.vehicle.id;
    //         }

    //         if(result.vehicle == null){
    //             this.selectedDriverId = null;
    //             this.selectedVehicleId = null;
    //         }

    //     });
    // }

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

        $('#selectedVehicleId').on('select2:select', function (e) {
            if (!s.locked) {
                s.updateRoute();
            } else {
                s.notify.info(s.l('Unlocked Loadlist First'));
            }

        });

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



    }

    updateRoute() {
        // let timeId = localStorage.getItem('timeZoneId');
        // moment.tz.setDefault(timeId);

        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.loadDate = localStorage.getItem('loadDate');
        this.route.locked = this.locked;
        this.route.id = this.routeId;


        if ((<HTMLInputElement>document.getElementById('selectedVehicleId')).value == 'null') {
            this.attribute = true;
            (<HTMLInputElement>document.getElementById('select2-selectedDriverId-container')).innerText = 'None';
        } else {
            this.attribute = false;
        }
        this._controllerRoute.updateControllerRoute(this.route)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result => {
                this.notify.info(this.l('SavedSuccessfully'));
            });
    }

    updateVehicle() {

        this._controllerVehicle.getVehicleForEdit(Number((<HTMLInputElement>document.getElementById('selectedVehicleId')).value))
            .subscribe(result => {
                result.vehicle.userId = Number((<HTMLInputElement>document.getElementById('selectedDriverId')).value);
                if (!this.locked) {
                    this._controllerVehicle.updateVehicle(result.vehicle)
                        .pipe(finalize(() => this.saving = false))
                        .subscribe(() => {
                            this.notify.info(this.l('SavedSuccessfully'));

                        });
                } else {
                    this.notify.info(this.l('Unlocked Loadlist First'));
                }

            });
    }
    setDeparture() {
        if (!this.locked) {
            if (this.departure) {
                this.departure = '';
                this.startTime = '';
            } else {
                this.departure = moment(new Date()).format('YYYY-MM-DD hh:mm a');
                this.startTime = moment(new Date()).format('hh:mm a');
            }
            this.updateRoute();
        } else {
            this.notify.info(this.l('Unlocked Loadlist First'));
        }
    }

    setCompletion() {
        if (!this.locked) {
            if (this.completion) {
                this.completion = '';
                this.endTime = '';
            } else {
                this.completion = moment(new Date()).format('YYYY-MM-DD hh:mm a');
                this.endTime = moment(new Date()).format('hh:mm a');
            }
            this.updateRoute();
        } else {
            this.notify.info(this.l('Unlocked Loadlist First'));
        }


    }

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