import { Component, ViewChild, OnInit } from "@angular/core";
import { MatPaginator } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import Swal from "sweetalert2";
import { CatalogsService } from "src/app/services/catalogs.service";
import { InvestmentsService } from "@app/services/investments.service";
import { InstrumentCalculations } from "@app/services/instrument-calculations.service";

import { AuthService } from "@app/services/auth2.service";
import { JwtHelperService } from "@auth0/angular-jwt";
import { InvestmentProposal } from "@app/models/investment-proposal";
import { from } from "rxjs";
import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
import { Router, ActivatedRoute } from "@angular/router";
import {
  FormBuilder,
  FormGroup,
  FormControl,
  FormArray,
  Validators
} from "@angular/forms";

@Component({
  selector: "app-fondos-costs",
  templateUrl: "./fondos.costs.component.html"
  //styleUrls: ["./dap.costs.component.scss"]
})
export class FINVCostsComponent implements OnInit {
  helper = new JwtHelperService();

  title: string = "Dividendos para fondos de inversión";

  displayedColumns: string[] = [
    "posicion",
    "plazo",
    "fecha_pago",
    "ingreso_bruto",
    "ingreso_neto",
    "dividendo_porcentaje",
    "rendimiento_porcentaje",
    "rendimiento",
    "id_fondo_inversion"
  ];

  //displayedColumns: string[] = ['state'];

  listProposals: InvestmentProposal[];
  dataSource = new MatTableDataSource(this.listProposals);

  resultsLength = 0;
  isLoadingResults = true;
  isRateLimitReached = false;
  userRole: any;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  role_number: any;
  investmentProposalID: string;

  form: FormArray;
  investmentProposalForm: FormGroup;

  proyecciones: any;
  proyeccionesProps = [];
  dataRetrieved: boolean = false;

  array1;
  array2;
  array3;
  investment: any;
  instrument_work: any;
  instrument_exists: boolean;

  constructor(
    private catalogService: CatalogsService,
    private investmentsService: InvestmentsService,
    private authService: AuthService,
    private formInvestmentProposal: FormInvestmentProposalService,
    private router: Router,
    private route: ActivatedRoute,
    private instrumentService: InstrumentCalculations,

    private formBuilder: FormBuilder
  ) {
    const decodedToken = this.helper.decodeToken(
      this.authService.getJwtToken()
    );
    this.userRole = decodedToken.groups;

    Swal.fire({
      allowOutsideClick: false,
      icon: "info",
      text: "Espere por favor..."
    });
    Swal.showLoading();
  }

  ngOnInit() {
    Swal.close();
    const formDataObj = {};

    this.route.params.subscribe(params => {
      this.investmentProposalID = params["id"];
    });

    if (this.investmentProposalID == undefined)
      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");

    if (this.investmentProposalID != undefined) {
      this.investmentsService
        .getProposalInvestment(this.investmentProposalID)
        .subscribe(
          res => {
            this.investment = res["result"];
            this.instrument_work =
              res["result"]["id_inversion_instrumento"]["instrumento"];
            this.instrument_exists = true;

            this.proyecciones =
              res["result"]["id_inversion_instrumento"]["instrumento"][
                "proyecciones"
              ];
            this.proyecciones.pop();

            this.form = new FormArray(this.buildForm(this.proyecciones));
            this.dataRetrieved = true;
          },
          err => {
            Swal.fire({
              icon: "error",
              title: "Error en el servidor",
              text: err.message
            });
          }
        );
    }

    setTimeout(() => {
      Swal.close();
    }, 1200);
  }
  clearProyeccion(proyecciones,nombres,tipoDato){
    let clearPro = []  
 
     proyecciones.forEach(createNewProyeccion); 
   
    function createNewProyeccion(arrFila, index) {
     nombres.forEach(loopNombres);
    
     function loopNombres(nombre, index) {
 
       arrFila[nombre] = parseFloat(arrFila[nombre].toString().replace(",",""))        
       } 
       clearPro.push(arrFila)
       
     } 
 
   return clearPro;
   }
 
   public inputValidator(event: any) {
     //console.log(event.target.value);
     const pattern = /^[0-9]*$/;   
     //let inputChar = String.fromCharCode(event.charCode)
     
     if (!pattern.test(event.target.value)) {
 
       event.target.value = event.target.value.replace(/[^\d,.]+/g, '');
       // invalid character, prevent input
 
     }
     
   }
  recalculateProjectionChanges() {
    let nombresProyecciones = ["dividendo_porcentaje",
                                "rendimiento_porcentaje"]
    let clearPro = this.clearProyeccion(this.form.value,nombresProyecciones,"decimal")
    let objProjection = { proyecciones: clearPro };
    Swal.fire({
      allowOutsideClick: false,
      icon: "info",
      text: "Espere por favor..."
    });
    Swal.showLoading();
    console.log(objProjection);
    this.instrumentService
      .projectionCalc(this.investmentProposalID, this.form.value)
      .subscribe(
        result => {
          Swal.fire({
            allowOutsideClick: false,
            icon: "success",
            showCancelButton: false,
            title: "Exito"
          });
          this.proyecciones = result["result"]["proyecciones"];
          this.proyecciones.pop();

          this.form.clear();
          this.form = new FormArray(this.buildForm(this.proyecciones));
          Swal.close();
          //window.location.reload();
        },
        err => {
          Swal.fire({
            icon: "error",
            title: "Error al guardar",
            text: err.message
          });
        }
      );
  }

  saveProjection() {
    let objProjection = { proyecciones: this.form.value };
    Swal.fire({
      allowOutsideClick: false,
      icon: "info",
      text: "Espere por favor..."
    });
    Swal.showLoading();

    this.instrumentService
      .projectionModification(this.investmentProposalID, objProjection)
      .subscribe(
        resp => {
          Swal.fire({
            allowOutsideClick: false,
            icon: "success",
            showCancelButton: false,
            title: "Exito",
            confirmButtonText: "La información ha sido actualizada"
          }).then(result => {
            Swal.close();
            //window.location.reload();
          });
        },
        err => {
          Swal.fire({
            icon: "error",
            title: "Error al guardar",
            text: err.message
          });
        }
      );
  }

  buildForm(items: any[]): FormGroup[] {
    return items.map(x => this.buildItem(x));
  }
  //return a formGroup
  buildItem(item: any): FormGroup {
    return new FormGroup({
      id_proyeccion_ingreso: new FormControl(item.id_proyeccion_ingreso),
      posicion: new FormControl(item.posicion),
      plazo: new FormControl(item.plazo),
      fecha_pago: new FormControl(item.fecha_pago),
      ingreso_bruto: new FormControl(item.ingreso_bruto),
      ingreso_neto: new FormControl(item.ingreso_neto),
      dividendo_porcentaje: new FormControl(item.dividendo_porcentaje),
      rendimiento_porcentaje: new FormControl(item.rendimiento_porcentaje),
      rendimiento: new FormControl(item.rendimiento),
      id_fondo_inversion: new FormControl(item.id_fondo_inversion)
    });
  }
}
