import { Component } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { Subject } from "rxjs";
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 { HalService } from "../../components/hal/hal.service";

declare var $: any;

export interface SubForm {
  identifier: string;
  action: ActionForm;
  form: FormGroup;
}

@WidgetComponent("nm-select-dynamic-sub-form")
@Component({
  selector: "nm-select-dynamic-sub-form",
  templateUrl: "./dynamic-form.component.html",
})
export class FormSelectDynamicSubFormComponent {
  public name: string;
  public prompt: string;
  public selectOptions: any[];

  public subFormName: string;
  public subForm: SubForm;

  public config: { [key: string]: SubForm } = {};
  public group: FormGroup;

  public selectedValue: string;

  @WidgetOutput()
  public control = new Subject<any>();

  constructor(private halService: HalService) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig,
    _group: FormGroup,
    _action: ActionForm
  ) {
    this.group = _group;
    this.name = configuration.configuration["name"];

    let prop = formProperty(_action, this.name);
    this.prompt = prop.description || configuration.configuration["prompt"];
    this.subFormName =
      prop.subformName || configuration.configuration["subFormName"];

    this.halService.suggestObservable(prop.suggest).subscribe((values) => {
      this.selectOptions = values;
      for (let val of values) {
        this.config[val.value] = {
          identifier: val.value,
          action: val.action[0],
          form: new FormGroup({}),
        };
      }

      if ((this.selectOptions.length = 1)) {
        this.selectedValue = this.selectOptions[0].value;
        this.subFormChanged(this.selectOptions[0].value);
        $(".ui-dropdown-label").each(function (index) {
          if (!$(this).is(":empty")) {
            $(this)
              .closest("p-dropdown")
              .find(".nm-label-forselect")
              .addClass("ui-label-after");
          }
        });
      }
    });

    this.group.addControl(this.name, new FormControl());
    this.group.addControl(this.subFormName, new FormGroup({}));
  }

  ngOnInit() {}

  public subFormChanged(event: any) {
    let form = this.config[event];
    this.group.setControl(this.subFormName, form.form);
    this.subForm = form;
  }
}