import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ucapAnimations } from '../animations';

export interface FloatActionButton {
  /** Meterial Icon type */
  icon: string;
  tooltip?: string;
  divisionType?: string;
}

@Component({
  selector: 'ucap-float-action-button',
  templateUrl: './float-action-button.component.html',
  styleUrls: ['./float-action-button.component.scss'],
  animations: ucapAnimations
})
export class FloatActionButtonComponent implements OnInit {
  @Input()
  fabButtons: FloatActionButton[] = [];
  buttons = [];
  fabTogglerState = 'inactive';

  @Output()
  buttonClick = new EventEmitter<{
    btn: FloatActionButton;
  }>();

  constructor() {}
  ngOnInit() {}

  showItems() {
    this.fabTogglerState = 'active';
    this.buttons = this.fabButtons;
  }

  hideItems() {
    this.fabTogglerState = 'inactive';
    this.buttons = [];
  }

  getTooltip(btn: FloatActionButton) {
    if (!!btn && !!btn.tooltip && btn.tooltip.trim().length > 0) {
      return btn.tooltip;
    } else {
      return '';
    }
  }

  onToggleFab() {
    if (this.fabButtons.length > 1) {
      this.buttons.length ? this.hideItems() : this.showItems();
    } else if (this.fabButtons.length === 1) {
      this.buttonClick.emit({ btn: this.fabButtons[0] });
    }
  }

  onClickButton(btn: FloatActionButton) {
    this.hideItems();
    this.buttonClick.emit({ btn });
  }
}
