import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Catalogo } from 'src/app/models/catalogo';
import { ClaseService } from 'src/app/services/clase.service';
import { Clase } from 'src/app/models/clase';
import { Transaccion } from 'src/app/models/transaccion';
import { Cuenta } from 'src/app/models/cuenta';
import { CuentaService } from 'src/app/services/cuenta.service';

export interface CuentaTable {
  cuenta: string;
  debe: number;
  haber: number;
}

@Component({
  selector: 'app-crear-partida',
  templateUrl: './crear-partida.component.html',
  styleUrls: ['./crear-partida.component.css'],
  providers: [ClaseService, CuentaService]
})


export class CrearPartidaComponent implements OnInit {
  //Titulos
  public title: string;
  public subtitle: string;
  //Declarar modelos
  public register_transaccion: Transaccion;
  public clase: Clase;
  public cuenta: Cuenta;
  //Tabla
  public CUENTAS_DATA: CuentaTable[];
  //Filas a indexar
  public newRow;
  //Variables para debe y haber
  public debe: number;
  public haber: number;

  constructor(
    private _claseService: ClaseService,
    private _cuentaService: CuentaService,
  ) {
    this.title = 'Nueva Partida'
    this.subtitle = 'Partida'
    this.register_transaccion = new Transaccion('', '', '', null, null, null);
    this.CUENTAS_DATA = [];
    this.newRow = new Array();
  }

  ngOnInit() {
    console.log(this.CUENTAS_DATA)
  }

  getDebeHaber() {
    if(this.register_transaccion.saldo == 0) {
      if(this.register_transaccion.transaccion == 0) {
        this.debe = this.register_transaccion.monto;
        this.haber = 0;
      } else {
        this.debe = 0;
        this.haber = this.register_transaccion.monto;
      }
    } else {
      if(this.register_transaccion.transaccion == 1) {
        this.debe = this.register_transaccion.monto;
        this.haber = 0;
      } else {
        this.debe = 0;
        this.haber = this.register_transaccion.monto;
      }
    }
  }

  addToTable() {
    let codigo = this.register_transaccion.codigo
    this.getClase(codigo.substring(0,1));
    switch(this.register_transaccion.codigo.length) {
      case 3:
        this.getCuenta(codigo);
      break;
      case 5:
      break;
      case 7:
      break;
    }
    this.getDebeHaber();
    this.newRow = {
      codigo: codigo,
      cuenta: this.register_transaccion.cuenta,
      debe: this.debe,
      haber: this.haber
    };
    this.CUENTAS_DATA.push(this.newRow);
    console.log(this.CUENTAS_DATA)
    console.log(this.register_transaccion.saldo)
  }

  getClase(id: string) {
    this._claseService.getClase(id).subscribe(
      response => {
        if(!response.clase) {
          //this._router.navigate(['/']);
        } else {
          this.clase = response.clase
          this.register_transaccion.saldo = this.clase.saldo;
        }
      },
      error => {
        var errorMessage = <any>error

        if(errorMessage != null) {
          var body = JSON.parse(error._body);
          console.log(error);
        }
      }
    )
  }
  getCuenta(id: string){
    this._cuentaService.getCuenta(id).subscribe(
      response => {
        if(!response.cuenta) {
          //this._router.navigate(['/']);
        } else {
          this.cuenta = response.cuenta;
          this.register_transaccion._id = this.cuenta._id;
          this.register_transaccion.codigo = this.cuenta.codigo;
          this.register_transaccion.cuenta = this.cuenta.cuenta;
        }
      },
      error => {
        var errorMessage = <any>error

        if(errorMessage != null) {
          var body = JSON.parse(error._body);
          console.log(error);
        }
      }
    )
  }
}

<h1>{{title}}</h1>
<mat-card>
  <form autocomplete="off" class="input-form" #inputForm="ngForm" (ngSubmit)="addToTable()">
    <mat-form-field>
      <input type="text" matInput placeholder="Código de Cuenta" #codigo="ngModel" name="codigo" [(ngModel)]="register_transaccion.codigo">
    </mat-form-field>
    <mat-form-field>
      <input type="number" matInput placeholder="Monto $"  min="0" step="0.01" #monto="ngModel" name="monto" [(ngModel)]="register_transaccion.monto" value="0">
    </mat-form-field>
    <mat-form-field>
      <input type="number" matInput placeholder="Transacción" #transaccion="ngModel" name="transaccion" [(ngModel)]="register_transaccion.transaccion" min="0" max="1" value="0">
      <mat-hint><i>0: Ingreso / 1: Egreso</i></mat-hint>
    </mat-form-field>
    <button mat-raised-button class="submit-button" type="submit" color="primary">Agregar</button>
  </form>
</mat-card>

getCuenta(id: string){
    this._cuentaService.getCuenta(id).subscribe(
      response => {
        if(!response.cuenta) {
          //this._router.navigate(['/']);
        } else {
          this.cuenta = response.cuenta;
          this.register_transaccion._id = this.cuenta._id;
          this.setValues(this.cuenta.codigo, this.cuenta.cuenta);
        }
      },
      error => {
        var errorMessage = <any>error

        if(errorMessage != null) {
          var body = JSON.parse(error._body);
          console.log(error);
        }
      }
    )
  }

//Set valores de cuentas
  setValues(codigo: string, cuenta: string) {
    this.register_transaccion.codigo = codigo;
    this.register_transaccion.cuenta = cuenta;
    this.getDebeHaber();
    this.newRow = {
      codigo: codigo,
      cuenta: this.register_transaccion.cuenta,
      debe: this.debe,
      haber: this.haber
    };
    this.CUENTAS_DATA.push(this.newRow);
  }