// vim: set tw=80 ts=2 sw=2 sts=2:
import { Component, Input } from '@angular/core';

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

import { Account } from './account';

@Component({
  selector: 'account-edit-modal',
  template: `
<div class="modal-header">
  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
</div>

<div class="modal-body" id="modal-body">
  <form class="form-horizontal simple-form" novalidate (submit)="submit()" #accountForm="ngForm">
    <div class="form-group"
      [ngClass]="{ 'has-error': name.errors }">
      <label class="col-sm-4 control-label" for="name">Account name</label>

      <div class="col-sm-8">
        <input class="form-control"
          type="text" placeholder="Account name"
          id="name" name="name"
          [(ngModel)]="account.name" #name="ngModel"
          required>

        <div class="help-block" *ngIf="name.errors && name.touched">
          <p [hidden]="!name.errors.required">The account name is required.</p>
        </div>
      </div>
    </div>

    <div class="form-group"
      [ngClass]="{ 'has-error': authorizedOverdraft.errors }">
      <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>

      <div class="col-sm-8">
        <div class="input-group">
          <div class="input-group-addon">-</div>

          <input class="form-control"
            type="number" placeholder="Authorized overdraft"
            id="authorized-overdraft" name="authorized_overdraft"
            [(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
            required min="0">

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

        <div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
          <p [hidden]="!authorizedOverdraft.errors.required">
            The authorized overdraft is required.
          </p>

          <p [hidden]="!authorizedOverdraft.errors.min">
            The authorized overdraft must be equal or greater than 0.
          </p>
        </div>
      </div>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
    Save
  </button>

  <button class="btn btn-default" (click)="cancel()">
    Cancel
  </button>
</div>
  `
})
export class AccountEditModalComponent {
  @Input() account: Account

  constructor(public activeModal: NgbActiveModal) {}

  title(): string {
    if(this.account.id) {
      return "Account #" + this.account.id;
    } else {
      return "New account";
    }
  }

  submit(): void {
    this.activeModal.close(this.account);
  }

  cancel(): void {
    this.activeModal.dismiss("closed");
  }
}