import {
  Component,
  OnInit,
  Input,
  ViewChild,
  ComponentFactoryResolver
} from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";

import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
import { Instrument } from "@app/models/instrument";
import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
import { InstrumentDirective } from "../instrument/instrument.directive";
import { InstrumentComponent } from "../instrument/instrument.component";
import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
import { InstrumentsService } from "@app/services/instruments.service";

@Component({
  selector: "app-instrument-work",
  templateUrl: "./instrument-work.component.html"
})
export class InstrumentWorkComponent implements OnInit {
  title = "Formulario propuesta de inversión";
  workType: string;
  form: any;
  @Input() ads: Instrument[];
  currentAdIndex = -1;
  @ViewChild(InstrumentDirective, { static: true })
  adHost: InstrumentDirective;
  interval: any;
  @Input() formData: InvestmentProposalForm;
  indexDynamicComponent: number;
  investmentProposalID: string = undefined;
  constructor(
    private router: Router,
    private route: ActivatedRoute,

    private formDataService: FormInvestmentProposalService,
    private componentFactoryResolver: ComponentFactoryResolver,
    private instrumentService: InvestmentProposalWorkflowService,
    private loadInstrumentsService: InstrumentsService
  ) {}

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

    this.ads = this.loadInstrumentsService.getInstruments();
    this.formData = this.formDataService.getFormData();
    this.formData.instrumentos;
    this.indexDynamicComponent = this.ads.findIndex(
      x => x.component.name == this.formData.instrumentos
    );
    if (this.indexDynamicComponent >= 0) {
      this.loadComponent();
    } else {
    }
    //this.workType = this.formDataService.getWork();
  }

  loadComponent() {
    this.currentAdIndex = this.indexDynamicComponent % this.ads.length;
    const adItem = this.ads[this.currentAdIndex];
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      adItem.component
    );

    const viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<InstrumentComponent>componentRef.instance).data = adItem.data;
    (<InstrumentComponent>componentRef.instance).summary = false;
    (<InstrumentComponent>(
      componentRef.instance
    )).investmentID = this.investmentProposalID;
  }

  save(form: any): boolean {
    if (!form.valid) {
      return false;
    }

    this.formDataService.setWork(this.workType);
    return true;
  }

  goToPrevious(form: any) {
    if (this.save(form)) {
      // Navigate to the general info page
      this.router.navigate(["/investment-proposals/general-info"]);
    }
  }

  goToNext(form: any) {
    if (this.save(form)) {
      // Navigate to the address page
      this.router.navigate(["/address"]);
    }
  }
}
