import { Component, Input } from "@angular/core";
import { BHPDropdownConfig } from "./dropdown.config";

@Component({
  selector: "BHPDropdown",
  template: `
    <div [ngClass]="containerClass">
      <ng-content select=[dropdownToggle]></ng-content>
      <ul class="dropdown-menu" [ngClass]="menuClass + (isOpen===true? ' show' : ' ')">
        <ng-content></ng-content>
      </ul>
    </div>`
})
export class BHPDropdownComponent {
  @Input() containerClass: string = "";
  @Input() menuClass: string = "";
  @Input() isOpen: boolean = false;

  constructor(_config: BHPDropdownConfig) {
    Object.assign(this, _config);
  }

  show() {
    this.isOpen = true;
  }

  hide() {
    this.isOpen = false;
  }

  toggle(){
    this.isOpen = !this.isOpen;
  }
}