// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Logger } from '@nsalaun/ng-logger';

import { Account } from './account';

@Component({
  selector: 'account-form',
  exportAs: 'accountForm',
  template: `
<form novalidate
  (keyup.enter)="submit()" [formGroup]="form">
  <div class="form-group row">
    <label class="col-sm-5 control-label" [for]="name.key">Account name</label>

    <div class="col-sm-7"
      [ngClass]="{'has-danger': name.errors}">
      <input class="form-control"
        id="name" formControlName="name"
        placeholder="Account name">

      <div class="help-block text-danger" *ngIf="name.errors">
        <p *ngIf="name.errors.required">The account name is required.</p>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-5 control-label" for="authorized-overdraft">Authorized overdraft</label>

    <div class="col-sm-7"
      [ngClass]="{'has-danger': authorizedOverdraft.errors}">
      <div class="input-group">
        <input class="form-control"
          id="authorized-overdraft" formControlName="authorizedOverdraft"
          placeholder="Authorized overdraft">

        <div class="input-group-addon">.00€</div>
      </div>

      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
        <p *ngIf="authorizedOverdraft.errors.required">
          The authorized overdraft is required.
        </p>

        <p *ngIf="authorizedOverdraft.errors.max">
          The authorized overdraft must be less than or equal to 0.
        </p>
      </div>
    </div>
  </div>
</form>
  `
})
export class AccountFormComponent implements OnInit {
  public form: FormGroup;
  @Input() account: Account;
  @Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
    });

    this.form.patchValue({
      name: this.account.name,
      authorizedOverdraft: this.account.authorized_overdraft
    });
  }

  submit() {
    if(this.form.valid) {
      this.submitEventEmitter.emit();
    }
  }

  get name() {
    return this.form.get('name');
  }

  get authorizedOverdraft() {
    return this.form.get('authorizedOverdraft');
  }
}