import {
  Component,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  ViewChild
} from "@angular/core";
import { BHPAccordionComponent } from "./accordion.component";

@Component({
  selector: "BHPAccordionCollapse",
  template: `
    <div
      [ngClass]="bootstrapClass + ' ' + collapseClass"
      [style.height]="collapseHeight"
    >
      <div [ngClass]="bodyClass" style="display: flex; flex: 1;" #itemBody>
        <ng-content></ng-content>
      </div>
    </div>`
})
export class BHPAccordionCollapseComponent {
  @Input() isDisabled: boolean = false;
  /** Emits when the opened state changes */
  @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();

  @Input() bodyClass: string = "";
  @Input() collapseClass: string = "";

  @Input()
  get isOpen(): boolean {
    return this._isOpen;
  }
  set isOpen(value: boolean) {
    if (value !== this.isOpen && this.isDisabled === false) {
      if (value === true) {
        this.bootstrapClass = "collapsing";
        setTimeout(() => {
          this.collapseHeight = this.itemBody.nativeElement.clientHeight + "px";
          if (this._timer) clearTimeout(this._timer);
          this._timer = setTimeout(() => {
            this.bootstrapClass = "collapse show";
            this.collapseHeight = "";
          }, 350);
        }, 1);
      } else {
        this.bootstrapClass = "collapsing";
        this.collapseHeight = this.itemBody.nativeElement.clientHeight + "px";
        setTimeout(() => {
          this.collapseHeight = "";
          if (this._timer) clearTimeout(this._timer);
          this._timer = setTimeout(() => {
            this.bootstrapClass = "collapse";
          }, 350);
        }, 1);
      }

      this._isOpen = value;
      Promise.resolve(null).then(() => {
        this.isOpenChange.emit(value);
      });
    }
  }

  protected _timer: number;
  protected _isOpen: boolean = false;
  public bootstrapClass: string = "collapse";
  @ViewChild("itemBody") protected itemBody: ElementRef;
  public collapseHeight: string = "";
}