import { Component, Input ,ViewChild,ElementRef,EventEmitter,Output} from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, filter } from 'rxjs/operators'

@Component({
  selector: 'app-root',
  template:`
     <app-child [request]="request" (change-value)="handleChange($event)"></app-child>`
})
export class AppComponent {
   public request = {
     waypoints : [ {location: 'Pisa'} , {location:'Pistoia'}],
     avoidToll: false
   }
   handleChange(r) {
     this.request =  r;
     console.log(this.request);
   }
}

@Component({
  selector: 'app-child',
  template: `
      <!!*=.=>
         <app-input-element [value]="item.location" [index]="i" (change-value)="handleChange($event)"></app-input-element>
      </div>`
})
export class ChildComponent{
  @Input('request') request:any;
  @Output('change-value') changeValue = new EventEmitter<any>();

  handleChange(value:any){
    /*
    let wp = this.request.waypoints.slice();
    wp[value.index].location = value.value;
    this.changeValue.emit(
      {...this.request, waypoints: wp }
    );
    */
    let newObj = JSON.parse(JSON.stringify(this.request));
    newObj.waypoints[value.index].location=value.value;
    this.changeValue.emit(newObj);

  }

}



@Component({
  selector: 'app-input-element',
  template: `
    <input type="text" [value]="value" #myinput>
  `
})

export class InputElementComponent{
  @ViewChild('myinput', { static: true }) inputElement: ElementRef;
  @Input('value') value: string;
  @Input('index') index:number;
  @Output('change-value') changeValue = new EventEmitter<any>();

  ngAfterViewInit(){
    fromEvent(this.inputElement.nativeElement, 'keyup')
            .pipe(
                map((event: KeyboardEvent) => (event.target as HTMLInputElement).value),
                filter(text => text.length > 3)
            )
            .subscribe(value => {
        this.changeValue.emit({value:value,index:this.index});
            });
  }
}