import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rdp-input-editor',
  styleUrls: ['./rdp-input-editor.component.scss'],
  template: `
      <input class="input-editor" [disabled]="isColumnDisabled"  
      [(ngModel)]="columnValue" 
      type="text" name="{{columntitle}}"  
      id="{{columntitle}}"
      (change)="detectChange(columnValue)">
  `
})
export class RdpInputEditorComponent implements OnInit {

  @Input() rowdata: any;
  @Input() columntitle: any
  @Input() disabled: boolean;

  @Output() changedColumnValue = new EventEmitter<any>();

  columnValue: any;
  isColumnDisabled:boolean;

  constructor() { }

  ngOnInit() {
    if (this.rowdata != null || this.rowdata != undefined) {
      let rowObj = JSON.parse(this.rowdata);
      let column = this.columntitle;
      this.columnValue = rowObj[column];
    } else {
      this.columnValue = null;
    }
    this.isColumnDisabled = this.disabled;
  }

  detectChange(changedValue) {
    this.changedColumnValue.emit(changedValue);
  }

}