import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    VehicleLocationServiceProxy, CreateVehicleLocationInput, 
} 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';

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

   @ViewChild('createModal', {static: false}) modal: ModalDirective;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

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

    vehicleInput: {
    id: number;
    name: string;
       
    };
    

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _vehicleService: VehicleServiceProxy,
        private _vehicleLocationService: VehicleLocationServiceProxy
        
    ) {
        super(injector);
    }

    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;
      
      
    }

    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.vehicleId = Number((<HTMLInputElement>document.getElementById('vehicleSelectInput')).value);


        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
      ).subscribe(result => {
          this.locations = result.items;
           console.log(result.items);
      });
    }

    filterVehicles(event): void {

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

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

    showVehicles(maxcount): void {

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

    
}