// vim: set tw=80 ts=2 sw=2 sts=2 :
import { AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

import { Operation } from './operation';

@Component({
  selector: 'operation-form',
  template: `
<form class="form-horizontal simple-form">
  <div class="form-group">
    <label class="col-sm-4 control-label" for="operation-date">Date</label>
    <div class="col-sm-8">
      <input class="form-control" id="operation-date" name="operation_date"
        type="text" [(ngModel)]="operation.operation_date"
        [textMask]="{mask: dateMask}"
        placeholder="Operation date">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="label">Label</label>
    <div class="col-sm-8">
      <input class="form-control" id="label" name="label"
        [(ngModel)]="operation.label" type="text" placeholder="Label">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="value">Montant</label>
    <div class="col-sm-8">
      <input class="form-control" id="value" name="value"
        [(ngModel)]="operation.value" type="number" placeholder="Value">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" for="category">Catégorie</label>
    <div class="col-sm-8">
      <input class="form-control" id="category" name="category"
        [(ngModel)]="operation.category" type="text" placeholder="Category">
    </div>
  </div>
</form>
  `
})
export class OperationFormComponent implements AfterViewChecked {
  @Input() operation: Operation;
  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
  @ViewChild('form') form: NgForm;

  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];

  constructor() {}

  ngAfterViewChecked() {
    this.onValid.emit(this.form.form.valid);
  }
}