import { DisplayMode } from './../../model/common-model';
import { bindable, customElement, inlineView } from "aurelia-templating";

@inlineView(`<template class="ui-accordeon" class.bind="(displayMode == 'Vertical' ? 'ui-accordeon-vertical' : 'ui-accordeon-horizontal')" ref="currentAccordeon">
<slot></slot>
</template>`)
@customElement("ui-accordeon")
export class UIAccordeon {
  @bindable
  private displayMode: DisplayMode = 'Vertical';

  private currentAccordeon: any;

  attached() {
    if (this.displayMode == "Horizontal") {
      let items = (this.currentAccordeon.getElementsByTagName('ui-accordeon-item') as HTMLElement[]);
      if (items.length > 0) {
        if (Array.from(items).filter(x => x.au['ui-accordeon-item'].viewModel.expanded).length == 0) {
          items[0].au['ui-accordeon-item'].viewModel.expanded = true;
        }
      }
    }
  }
}