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 { 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 } from "@angular/forms";

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

  title: string = "Costos para depósito a plazo";

  displayedColumns: string[] = [
    "codigo_inversion",
    "asunto",
    "id_tipo_mercado",
    "id_inversion_instrumento",
    "id"
  ];
  //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;

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

  array1;
  array2;
  array3;

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

    private formBuilder: FormBuilder
  ) {
    const decodedToken = this.helper.decodeToken(
      this.authService.getJwtToken()
    );
    this.userRole = decodedToken.groups;
    //    console.log("User role");
    //  console.log(this.userRole);
    //console.log(this.userRole.length == 0);

    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.proyecciones =
              res["result"]["id_inversion_instrumento"]["instrumento"][
                "proyecciones"
              ];

            this.form = new FormArray(this.buildForm(this.proyecciones));

            /*
            this.array1 = [];
            this.array2 = [];

            for (var i = 0; i < this.proyecciones.length; i++) {
              this.array2 = [];
              for (const prop2 of Object.keys(this.proyecciones[i])) {
                this.array3 = [];
                formDataObj[prop2] = new FormControl(
                  this.proyecciones[i][prop2]
                );
                this.proyeccionesProps.push(prop2);

                this.array3.push(prop2);
                this.array2.push(this.array3);
              }
              this.array1.push(this.array2);
            }
            console.log(this.array1);

            this.form = new FormGroup(formDataObj);
            console.log(this.form);
            */
            this.dataRetrieved = true;
          },
          err => {
            Swal.fire({
              icon: "error",
              title: "Error en el servidor",
              text: err.message
            });
          }
        );
    }

    setTimeout(() => {
      Swal.close();
    }, 1200);
  }

  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),
      renta: new FormControl(item.renta),
      ingreso_neto: new FormControl(item.ingreso_neto),
      id_deposito_plazo: new FormControl(item.id_deposito_plazo)
    });
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue;

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  view_investment_proposal(id: string) {
    this.formInvestmentProposal.resetFormData();
    Swal.fire({
      allowOutsideClick: false,
      icon: "info",
      text: "Espere por favor..."
    });
    Swal.showLoading();
    setTimeout(() => {
      this.router.navigate([`/investment-proposal/${id}`]);
    }, 1000);
  }

  modify_investment_proposal(id: string) {
    this.formInvestmentProposal.resetFormData();

    Swal.fire({
      allowOutsideClick: false,
      icon: "info",
      text: "Espere por favor..."
    });
    Swal.showLoading();
    setTimeout(() => {
      this.router.navigate(["/investment-proposal/general-info"], {
        queryParams: { id: id }
      });
    }, 1000);
  }

  // Verifica permisos para mostrar boton de edicion y/o envio a revision,
  // segun los permisos del usuario y el estado de la propuesta
  can_modify_or_send_to_review(status: string) {
    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
      // TO DO ver que el codigo de los tipos de usuario
      return true;
    } else {
      return false;
    }
  }
}