import { Component, OnInit, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap';
import { LocationCodeService } from '../../../../services/location.code.service';

@Component({
  selector: 'app-edit-location',
  templateUrl: './edit-location.component.html',
  styleUrls: ['./edit-location.component.css']
})
export class EditLocationComponent implements OnInit {
  editLocationForm: FormGroup;
  locations: any[];
  public event: EventEmitter<any> = new EventEmitter();

  constructor(public bsModalRef: BsModalRef,private fb:FormBuilder,private locationCodeService: LocationCodeService,
    ){
    this.locationCodeService.getAllLocation_Codes().subscribe(
      locationCodes => {
        // tslint:disable-next-line: no-string-literal
        this.locations = locationCodes['data'] as any[];
        for (const item of this.locations) {
          item.locationName = item.location_name + '--' + item.location_state;
        }
      });
  }

  ngOnInit(): void{
    this.editLocationForm = this.fb.group({
      location: [, Validators.required],
    });
  }

  onSelect(){
    if(this.editLocationForm.get('location').value === null){
      this.editLocationForm.controls['location'].markAllAsTouched();
    }
    if (this.editLocationForm.valid){
      let selectedLocation = this.locations.find(location => location.location_id === this.editLocationForm.get('location').value);
      this.event.emit(selectedLocation);
      this.bsModalRef.hide();
    }
  }

  get location() { return this.editLocationForm.get('location') }
}