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,
  Validators
} 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;
  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 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.investmentProposalForm = this.formBuilder.group({
              monto_inversion: [
                !this.instrument_exists
                  ? ""
                  : this.instrument_work.monto_inversion,
                [
                  Validators.required,
                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
                ]
              ],

              renta_porcentaje: [
                !this.instrument_exists
                  ? ""
                  : this.instrument_work.renta_porcentaje,
                [Validators.required]
              ],
              tasa_porcentaje: [
                !this.instrument_exists
                  ? ""
                  : this.instrument_work.tasa_porcentaje,
                [
                  Validators.required,
                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
                ]
              ],
              plazo: [
                !this.instrument_exists ? "" : this.instrument_work.plazo,
                [Validators.required]
              ],

              /*formato_ingreso: [
                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
                [Validators.required]
              ],*/

              fecha_vencimiento: [
                !this.instrument_exists
                  ? ""
                  : this.instrument_work.fecha_vencimiento,
                Validators.required
              ],
              fecha_operacion: [
                !this.instrument_exists
                  ? ""
                  : this.instrument_work.fecha_operacion,
                Validators.required
              ]
            });
          },
          err => {}
        );

      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.dataRetrieved = true;

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

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

  submitInstrumentChanges() {}

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

    this.investmentsService
      .updateInstrumentProjection(this.investmentProposalID, objProjection)
      .subscribe(
        success => {
          if (success) {
            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),
      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;
    }
  }
}