import {Component, ElementRef, Renderer, ViewChild} from '@angular/core';

@Component({
    exportAs: 'sbItemBody',
    selector: 'sb-item-body',
    template: `
        <div #body class="sb-item-body" [style.height]="height">
            <div class="card-block"><ng-content></ng-content></div>
        </div>
    `
})
export class SBItemBody {

    public height = '0';

    @ViewChild('body') bodyEl: ElementRef;

    constructor(private renderer: Renderer) {}

    toggle(collapsed: boolean) {
        let height = '0';
        if (!collapsed) {
            this.renderer.setElementStyle(this.bodyEl.nativeElement, 'height', 'auto');
            height = this.bodyEl.nativeElement.offsetHeight + 'px';
            this.renderer.setElementStyle(this.bodyEl.nativeElement, 'height', '0');
        }
        setTimeout(() => this.renderer.setElementStyle(this.bodyEl.nativeElement, 'height', height), 50);
    }
}