import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    UserLocationServiceProxy, CreateUserLocationInput, 
} 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 { UserListDto, UserServiceProxy } from '@shared/service-proxies/service-proxies';
import * as jquery from 'jquery';


import { finalize } from 'rxjs/operators';

@Component({
    selector: 'createUserLocationModal',
    templateUrl: './create-User-location-modal.component.html'
})
export class CreateUserLocationModalComponent extends AppComponentBase {

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

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

    active = false;
    saving = false;
    userlocation: CreateUserLocationInput = new CreateUserLocationInput();
    locations: LocationListDto[] = [];
    users: UserListDto[] = [];
    
    locationInput: {
    id: number;
    name: string;
       
    };

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

    constructor(
        injector: Injector,
        private _locationService: LocationServiceProxy,
        private _userService: UserServiceProxy,
        private _userLocationService: UserLocationServiceProxy
        
    ) {
        super(injector);
    }

    show() {
        this.active = true;
        // this.init();
        let maxcount = 1000;
        this.showAllocations(maxcount);
        this.showAllUsers(maxcount);

        this.modal.show();
    }

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

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

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

    save(): void {
        this.saving = true;
        //this.userlocation.locationId = this.locationInput.id;
        //this.userlocation.userId = this.userInput.id;
        this.userlocation.locationId = Number((<HTMLInputElement>document.getElementById('locationSelectInput')).value);
        this.userlocation.userId = Number((<HTMLInputElement>document.getElementById('userSelectInput')).value);

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

    filterUsers(event): void {

      this._userService.getUsers(
          undefined,
          event.query,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined
      ).subscribe(result => {
          this.users = result.items;
      });
      
    }

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

    showAllUsers(maxcount): void {

      this._userService.getUsers(
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          maxcount,
          undefined
      ).subscribe(result => {
          this.users = result.items;
      });
      
    }

    
}