import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';

import { FloatButton } from '../../interfaces/components/float-button/float-button.interface';

@Component({
  selector: 'app-float-menu',
  templateUrl: './float-menu.component.html',
  styleUrls: ['./float-menu.component.scss']
})
export class FloatMenuComponent implements AfterViewInit {
  @ViewChild('menuRef') menuRef!: ElementRef<HTMLDivElement>;

  @Input() isVisible = false;
  @Input() options: FloatButton[] = [];

  @Output() isVisibleChange = new EventEmitter<boolean>();

  containerHeight = 0;

  ngAfterViewInit(): void {
      this.setContainerHeight();
  }

  setContainerHeight(): number {
    const container = this.menuRef?.nativeElement;

    if (!container) return 0;

    const height = container.scrollHeight;
    this.containerHeight = height;

    return height;
  }

  toggleVisibility() {
    this.isVisible = !this.isVisible;
    this.isVisibleChange.emit(this.isVisible);
  }
}
