import { Component, EventEmitter, Injector, OnInit, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    VehicleLocationServiceProxy, CreateVehicleLocationInput, LocationTableListDto, 
} from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { ModalDirective } from 'ngx-bootstrap';
import { LocationListDto, LocationServiceProxy } from '@shared/service-proxies/service-proxies';
import { VehicleListDto, VehicleServiceProxy } from '@shared/service-proxies/service-proxies';
import * as jquery from 'jquery';


import { finalize } from 'rxjs/operators';
import { CommonLookupModalComponent } from '@app/shared/common/lookup/common-lookup-modal.component';

@Component({
    selector: 'createVehicleLocationModal',
    templateUrl: './create-vehicle-location-modal.component.html'
})
export class CreateVehicleLocationModalComponent extends AppComponentBase implements OnInit{

   @ViewChild('createModal', {static: false}) modal: ModalDirective;
   @ViewChild('locationList', {static: true}) locationList: CommonLookupModalComponent;
   @ViewChild('vehicleList', {static: true}) vehicleList: CommonLookupModalComponent;
    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

    active = false;
    saving = false;
    disabled = true;
    vehiclelocation: CreateVehicleLocationInput = new CreateVehicleLocationInput();
    // locations: LocationListDto[] = [];
    locations: LocationTableListDto[] = [];
    vehicles: VehicleListDto[] = [];
    
    locationInput: {
    id: number;
    name: string;
       
    };

    textLocation
    locationId
    textVehicle : string
    vehicleId: any;
    vehicleInput: {
    id: number;
    name: string;
       
    };
    

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _vehicleService: VehicleServiceProxy,
        private _vehicleLocationService: VehicleLocationServiceProxy
        
    ) {
        super(injector);
    }
    ngOnInit(): void {
        this.vehicleListModalInit();
        this.locationListModalInit();
      }

    show() {
        this.active = true;
        // this.init();
        let maxcount = 1000;
        this.showLocations(maxcount);
        this.showVehicles(maxcount);
        this.modal.show();
    }

    onShown(): void {
        //document.getElementById('nameInput').focus();
        
        //this.location = new CreateLocationInput();;
        //this.vehiclelocation = null;
        //this.locationInput = null;
        //this.vehicleInput = null;
        // $('.kt-select2').select2();

        //$('#submit').attr("disabled", true);

      

        // $('.kt-select2').on('select2:select', function (e) {
        //   if($('#locationSelectInput').val() != '' && $('#vehicleSelectInput').val() != '') { 
        //     $('#submit').prop('disabled', false);
        //   }
          
        // });
        
    }

    init(): void {
      // this.location.contact = null;
      

     
    }

    locationListModalInit(){
        this.locationList.configure({
            title: this.l('Select location'),
            dataSource: (skipCount: number, maxResultCount: number, filter: string, tenantId?: number, locationId?:number) => {
                let input = {filter,maxResultCount,skipCount};
                input.filter = filter;
                input.maxResultCount = maxResultCount;
                input.skipCount = skipCount;
                    return this._locationService.getPagedLocation(
                        input.maxResultCount,input.skipCount,input.filter);                   
            }
            }); 
    }
    vehicleListModalInit(){
        this.vehicleList.configure({
            title: this.l('Select vehicle'),
            dataSource: (skipCount: number, maxResultCount: number, filter: string, tenantId?: number, locationId?:number) => {
                let input = {filter,maxResultCount,skipCount};
                input.filter = filter;
                input.maxResultCount = maxResultCount;
                input.skipCount = skipCount;
                    return this._vehicleService.getPagedVehicleLookup(
                        input.maxResultCount,input.skipCount,input.filter);                   
            }
            }); 
    }
    

    save(): void {
        this.saving = true;
        //this.vehiclelocation.locationId = this.locationInput.id;
        //this.vehiclelocation.vehicleId = this.vehicleInput.id;

        // this.vehiclelocation.locationId = Number((<HTMLInputElement>document.getElementById('locationSelectInput')).value);
        this.vehiclelocation.locationId = this.locationId;
        // this.vehiclelocation.vehicleId = Number((<HTMLInputElement>document.getElementById('vehicleSelectInput')).value);
        this.vehiclelocation.vehicleId = this.vehicleId

        this._vehicleLocationService.createVehicleLocation(this.vehiclelocation)
            .pipe(finalize(() => { this.saving = false; }))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
    }

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

    filterLocations(event): void {
    //   this._locationService.getLocation(
    //       undefined,
    //       event.query,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined
    //   ).subscribe(result => {
    //       this.locations = result.items;
    //        console.log(result.items);
    //   });
        this._locationService.getLocationTableOnly(
            undefined,
            event.query,
            undefined,
            undefined,
            undefined,
            undefined
        ).subscribe(result => {
            this.locations = result;
            //  console.log(result.items);
        });
    }

    filterVehicles(event): void {

      this._vehicleService.getVehiclePaged(
          undefined,
          event.query,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined
      ).subscribe(result => {
          this.vehicles = result.items;
      });
      
    }

    showLocations(maxcount): void {
    //   this._locationService.getLocation(
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       undefined,
    //       maxcount,
    //       undefined
    //   ).subscribe(result => {
    //       this.locations = result.items;
    //        console.log(result.items);
    //   });
        this._locationService.getLocationTableOnly(
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined
        ).subscribe(result => {
            this.locations = result;
            //  console.log(result.items);
        });
    }

    showVehicles(maxcount): void {

      this._vehicleService.getVehiclePaged(
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          maxcount,
          undefined
          
      ).subscribe(result => {
          this.vehicles = result.items;
      });
      
    }

    getLocation(filter : string){
        this.locationList.show();
        this.locationList.filterText = filter;   

    }
    clearLocation(){
        this.locationId = null;
        this.textLocation = '';

    }
    selectLocation(item){
        var resultId = item.value
        var name = item.name
        this.locationId = resultId;
        this.textLocation = name;


    }


    getVehicle(filter : string){
        this.vehicleList.show();
        this.vehicleList.filterText = filter;   

    }
    clearVehicle(){
        this.vehicleId = null;
        this.textVehicle = '';

    }
    selectVehicle(item){
        var resultId = item.value
        var name = item.name
        this.vehicleId = resultId;
        this.textVehicle = name;


    }
    
}