import {ElementBinding} from './element-binding';

/**
 * HTML-Element with inner Databinding
 */
export class ElementGroupBinding extends ElementBinding {
  // Id of the element to attach subelements
  protected _fieldId = 'fields';
  protected _subfieldBindings: any[] = [];

  /**
   * Returns the subFields of the object
   * must be overwritten in the children
   * @protected
   */
  protected subFields(): Array<any> {
    throw new Error('Not Implemented');
  }


  /**
   * Generating new SubElement
   * @return {ElementBinding}
   */
  protected newElement(): ElementBinding {
    throw new Error('Not Implemented');
    return new ElementBinding();
  }

  /**
   * Hiding Child Element
   * @param {HTMLElement} block
   */
  protected hideElement(block: HTMLElement) {
    if (block) {
      if (block.classList.contains('is-hidden')) {
        block.classList.remove('is-hidden');
      } else {
        block.classList.add('is-hidden');
      }
    }
  }


  /**
   * Callback after Render
   * Attach Fields to
   */
  _afterRender() {
    this._subfieldBindings = [];
    this.subFields().forEach((field: any) => {
      const newField: ElementBinding = this.newElement();
      newField.object = field;
      this.attachField(newField);
    });
  }

  /**
   * Attach a Field to Binding
   * @param {ElementBinding} newField
   */
  protected attachField(newField: ElementBinding) {
    const fieldElement = this.querySelector('#' + this._fieldId) as HTMLElement;

    if (fieldElement) {
      this._subfieldBindings.push(newField);
      fieldElement.appendChild(newField);
    }
  }
}