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

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

  constructor() {}

  @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.group.addControl(this.name, control);
  }

  ngOnInit() {}
}