// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Inject, Input, Output, EventEmitter, OnInit } from '@angular/core';

import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';

import { Account } from './account';
import { AccountBalances } from './accountBalances';
import { AccountBalancesService } from './accountBalances.service';
import { AccountService } from './account.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';

@Component({
  selector: 'tr[account-row]',
  host: {
    "[id]": "account.id",
    "[class.warning]": "warning",
    "[class.danger]": "danger"
  },
  template: `
<td>
  <a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
</td>

<td>
  <span (ngClass)="valueClass(account, accountBalances?.current)">
    {{ accountBalances?.current | currency:"EUR" }}
  </span>
</td>

<td>
  <span (ngClass)="valueClass(account, accountBalances?.pointed)">
    {{ accountBalances?.pointed | currency:"EUR" }}
  </span>
</td>

<td>{{ account.authorized_overdraft | currency:"EUR" }}</td>

<td>
  <div class="btn-group btn-group-xs">
    <!-- Edit account. -->
    <button type="button" class="btn btn-success"
      (click)="modify()">
      <span class="fa fa-pencil-square-o"></span>
    </button>

    <!-- Delete account, with confirm. -->
    <button type="button" class="btn btn-default"
      (click)="confirmDelete()">
      <span class="fa fa-trash-o"></span>
    </button>

    <!-- Open account scheduler. -->
    <a class="btn btn-default"
      [hidden]="!account.id"
      href="#!/account/{{ account.id }}/scheduler">
      <span class="fa fa-clock-o"></span>
    </a>
  </div>
</td>
  `
})
export class AccountRowComponent implements OnInit {
  @Input('account-row') account: Account;
  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();

  accountBalances: AccountBalances;

  constructor(
    private accountService: AccountService,
    private accountBalancesService: AccountBalancesService,
    private toastrService: ToastrService,
    private logger: Logger,
    private modal: NgbModal
  ) {
    this.logger.log("AccountRowComponent constructor");
  }

  ngOnInit() {
    this.logger.log(this.account);
    this.accountBalancesService
      .get(this.account.id)
      .subscribe((accountBalances: AccountBalances) => {
        this.accountBalances = accountBalances;
      })
  }

  get warning() {
    return this.account && this.accountBalances
      && this.account.authorized_overdraft < this.accountBalances.current
      && this.accountBalances.current < 0;
  };

  get error() {
    return this.account && this.accountBalances
      && this.accountBalances.current < this.account.authorized_overdraft;
  };

  /*
   * Return the class for a value compared to account authorized overdraft.
   */
  valueClass(value: number) {
    if (!value) {
      return;
    }

    if (value < this.account.authorized_overdraft) {
      return 'text-danger';
    } else if (value < 0) {
      return 'text-warning';
    }
  };

  confirmDelete() {
    const modal = this.modal.open(AccountDeleteModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.account = this.account;

    modal.result.then((account: Account) => {
      this.delete(account);
    }, (reason) => function(reason) {
    });
  };

  /*
   * Delete an account.
   */
  delete(account: Account) {
    var id = account.id;

    this.accountService.delete(account).subscribe(account => {
      this.toastrService.success('account #' + id + ' deleted.');

      this.needsReload.emit();
    }, function(result) {
      this.toastrService.error(
        'An error occurred while trying to delete account #' +
        id + ':<br />' + result
      );
    });
  };

  /*
   * Open the popup to modify the account, save it on confirm.
   */
  modify() {
    const modal = this.modal.open(AccountEditModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.account = this.account;

    modal.result.then((account: Account) => {
      this.logger.log("Modal closed => save account", account);
      this.save(account);
    }, (reason) => function(reason) {
    });
  };

  save(account: Account) {
    this.accountService.update(account).subscribe((account: Account) => {
      this.toastrService.success('Account #' + account.id + ' saved.');

      this.needsReload.emit();
    }, result => {
      this.logger.error('Error while saving account', account, result);

      this.toastrService.error(
        'Error while saving account: ' + result.message
      );
    });
  };
}