import {Directive, Input, HostBinding} from '@angular/core';

// todo: add animate
// todo: add init and on change
@Directive({selector: '[open]'})
export class Open {
  @HostBinding('style.display')
  public display:string;
  @HostBinding('class.in')
  @HostBinding('attr.aria-expanded')
  public isExpanded:boolean = true;

  @Input()
  public set open(value:boolean) {
    this.isExpanded = value;
    this.toggle();
  }

  public get open():boolean {
    return this.isExpanded;
  }

  constructor() {
  }
  init() {
    this.isExpanded = false;
    this.display = 'none';
  }
  toggle() {
    if (this.isExpanded) {
      this.hide();
    } else {
      this.show();
    }
  }

  hide() {
    this.isExpanded = false;
    this.display = 'none';
    if (typeof document !== 'undefined') {
      let backDrop = document.getElementsByClassName("modal-backdrop");
      if(backDrop.length>0){
        document.body.removeChild(backDrop[0]);
      }
    }
  }

  show() {
      if (typeof document !== 'undefined') {
        // let backDrop = document.createElement('div');
        // backDrop.className="modal-backdrop fade in";
        // document.body.appendChild(backDrop);
      }
    this.isExpanded = true;
    this.display = 'block';
  }
}