import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../widget.metadata";
import { ActionForm } from "../../components/hal/actionForm";
import { formProperty } from "../../components/hal/hal";
import { HttpClient } from "@angular/common/http";
import { map } from "rxjs/operators";

declare var contextPath: string;

@WidgetComponent("nm-form-input")
@Component({
  selector: "nm-form-input",
  templateUrl: "./input.component.html",
})
export class FormInputComponent {
  public name: string;
  public placeholder: string;
  public value: string;
  public hidden: boolean;
  public required: boolean;
  public group: FormGroup;
  public type: boolean;
  public defaultValue: boolean;

  constructor(private http: HttpClient) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig,
    _form: FormGroup,
    action: ActionForm
  ) {
    let name = configuration.configuration["name"];
    let prop = formProperty(action, name);

    this.name = prop.name;
    this.hidden = prop.hidden || configuration.configuration["hidden"];
    this.placeholder =
      prop.description || configuration.configuration["placeholder"];
    this.required = prop.required || configuration.configuration["required"];
    this.type = prop.type || configuration.configuration["type"];
    this.group = _form;
    let control = this.required
      ? new FormControl(prop.value, Validators.required)
      : new FormControl(prop.value);
    this.defaultValue = configuration.configuration["defaultValue"]
      ? configuration.configuration["defaultValue"]
      : this.defaultValue;

    if (this.defaultValue) {
      let uri = configuration.configuration["valueURI"];
      this.http
        .get(contextPath + uri)
        .pipe()
        .subscribe((data) => {
          this.value = (<any>data).fileName;
          control.setValue(this.value);
        });
    }

    this.group.addControl(this.name, control);
  }

  ngOnInit() {}
}