import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { WidgetConfig } from "../widget.configuration";
import { WidgetComponent, WidgetConfigure } from "../widget.metadata";
import { ActionForm } from "../../components/hal/actionForm";
import { formProperty } from "../../components/hal/hal";
import { HalService } from "../../components/hal/hal.service";

@WidgetComponent("nm-form-select")
@Component({
  selector: "nm-form-select",
  templateUrl: "./select.component.html",
})
export class FormSelectComponent {
  public name: string;
  public group: FormGroup;
  public placeholder: string;
  public hidden: boolean;
  public required: boolean;
  public multiple: boolean = false;
  public options: any[];
  public selectedValue: any;

  constructor(private halService: HalService) {}

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

    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"];

    if (configuration.configuration["multiple"]) {
      this.multiple = configuration.configuration["multiple"];
    }

    this.halService.suggestObservable(prop.suggest).subscribe((options) => {
      this.options = options;
    });

    this.group = _form;

    let control = prop.required
      ? new FormControl(prop.value)
      : new FormControl(prop.value, Validators.required);
    this.group.addControl(this.name, control);
    this.group.patchValue({ name: this.selectedValue });
  }

  ngOnInit() {}
}