import { Component, Input } from "@angular/core";
import { BHPAccordionConfig } from "./accordion.config";
import { BHPAccordionPanelComponent } from "./accordion-panel.component";

/** Displays collapsible content panels for presenting information in a limited amount of space. */
@Component({
  selector: "BHPAccordion",
  template: `<ng-content></ng-content>`,
  host: {
    "[attr.aria-multiselectable]": "closeOthers",
    class: "accordion"
  }
})
export class BHPAccordionComponent {
  protected  _closeOthers: boolean = true;
  /** if `true` expanding one item will close all others */
  @Input()
  get closeOthers(): boolean {
    return this._closeOthers;
  }

  set closeOthers(value: boolean) {
    if (value !== this._closeOthers) {
      this._closeOthers = value;
    }
  }

  protected groups: BHPAccordionPanelComponent[] = [];

  constructor(config: BHPAccordionConfig) {
    Object.assign(this, config);
  }

  closeOtherPanels(openGroup: BHPAccordionPanelComponent): void {
    if (this.closeOthers === false) {
      return;
    }

    this.groups.forEach((group: BHPAccordionPanelComponent) => {
      if (group !== openGroup) {
        group.isOpen = false;
      }
    });
  }

  addGroup(group: BHPAccordionPanelComponent): void {
    this.groups.push(group);
  }

  removeGroup(group: BHPAccordionPanelComponent): void {
    const index = this.groups.indexOf(group);
    if (index !== -1) {
      this.groups.splice(index, 1);
    }
  }
}