import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

@Component({
  selector: 'rd-form',
  template: `
    <ng-content select="rd-body"></ng-content>
    <div align="center" style="margin-top:15px;" class="formFooter" #footer [hidden]="!showFooter">
      <ng-content select="rd-footer"></ng-content>
    </div>
  `
})
export class Form extends RdComponent {
  private formDataList = [];

  @ViewChild("footer") footer;

  showFooter = false;

  ngAfterViewInit() {
    if (this.footer.nativeElement.children.length) this.showFooter = true;
  }

  addFormData = function (formData) {
    this.formDataList.push(formData);
  };

  removeFormData = function (formData) {
    for (let i in this.formDataList) {
      let item = this.formDataList[i];
      if (item == formData)
        this.formDataList.splice(parseInt(i), 1);
    }
  }

  validate = function () {
    var result = true;

    for (var i of this.formDataList) {
      if (!i.input.isValid()) result = false;
    }

    return result;
  }

  getQuery() {
    var query = {};

    for (var i of this.formDataList) {
      if (i.isValidFormData) {
        var item = i.getQueryItem();
        if (item.value === undefined || item.value === null) item.value = null;
        if (!item.key) {
          if (this.formDataList.length == 1) return item.value;
          else this.error("There should be only one 'rd-form-data' without a key!");
        }
        else RdLib.objectOperations.deepSet(query, item.key, item.value);
      }
    }

    return query;
  };

  clean() {
    for (var i of this.formDataList) i.clean();
  };
}