import { Component, OnInit } from "@angular/core";
import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { CatalogsService } from "@app/services/catalogs.service";
import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
import { formatDate, DatePipe } from "@angular/common";
import { parse } from "date-fns";
import { Router, ActivatedRoute } from "@angular/router";
import { InvestmentsService } from "@app/services/investments.service";
import Swal from "sweetalert2";

@Component({
  selector: "app-payment-info",
  templateUrl: "./payment-info.component.html"
})
export class PaymentInfoComponent implements OnInit {
  title: string = "Formulario de información para el pago";

  form: any;

  // For daterange
  daysLabels: any = {
    su: "Dom",
    mo: "Lun",
    tu: "Mar",
    we: "Mie",
    th: "Jue",
    fr: "Vie",
    sa: "Sab"
  };
  monthsLabels: any = {
    1: "Ene",
    2: "Feb",
    3: "Mar",
    4: "Abr",
    5: "May",
    6: "Jun",
    7: "Jul",
    8: "Ago",
    9: "Sep",
    10: "Oct",
    11: "Nov",
    12: "Dic"
  };
  myDpOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: "dd/mm/yyyy",
    dayLabels: this.daysLabels,
    monthLabels: this.monthsLabels
  };
  myDateInit: boolean = true;

  investmentProposalForm: FormGroup;
  submitted: boolean = false;
  role_number: any;
  markets: any;
  emitters: any;
  periodicities: any;
  rate_agencies: any;
  scores: any;
  investmentProposalID: string;
  countries: any;
  companies: any;
  format_incomes: any;
  operations: any;
  payment_terms: any;
  payment_types: any;
  inversionCode: any;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder,
    private formDataService: FormInvestmentProposalService,
    private catalogService: CatalogsService,
    private investmentsService: InvestmentsService
  ) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.investmentProposalID = params["id"];
    });
    if (this.investmentProposalID == undefined)
      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");

    this.investmentsService
      .getProposalInvestment(this.investmentProposalID)
      .subscribe(
        res => {
          console.log("results");
          console.log(res);
          console.log("-------");
          this.inversionCode = res["result"]["codigo_inversion"];
        },
        err => {
          Swal.fire({
            icon: "error",
            title: "Error en el servidor",
            text: err.message
          });
        }
      );

    this.catalogService.getPaymentTypes().subscribe(res => {
      this.payment_types = res;
    });
    this.catalogService.getCountries().subscribe(res => {
      this.countries = res;
    });

    this.investmentProposalForm = this.formBuilder.group({
      monto: [
        "",
        [
          Validators.required,
          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
        ]
      ],
      payment_types: ["", [Validators.required]],
      cuenta_bancaria: [""],
      fecha_pago: ["", Validators.required],
      fecha_vencimiento: ["", Validators.required]
    });
  }

  get f() {
    return this.investmentProposalForm.controls;
  }

  save(form: any): boolean {
    //if (!form.valid) {
    //return false;
    //}
    console.log(this.investmentProposalForm.value);
    this.formDataService.setComplementInfo(this.investmentProposalForm.value);
    return true;
  }

  goToPrevious(form: any) {
    this.submitted = true;
    if (this.investmentProposalID != undefined) {
      this.router.navigate(["/investment-proposal/instrument-work"], {
        queryParams: { id: this.investmentProposalID }
      });
    } else {
      this.router.navigate(["/investment-proposal/instrument-work"]);
    }
  }

  goToNext(form: any) {
    this.submitted = true;

    if (this.save(form)) {
      if (this.investmentProposalID != undefined) {
        this.router.navigate(["/investment-proposal/result"], {
          queryParams: { id: this.investmentProposalID }
        });
      } else {
        this.router.navigate(["/investment-proposal/result"]);
      }
    }
  }
}