/*
 * Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { CommandbarItemComponent } from '../item/commandbar-item.component';

@Component({
  selector: `bci-commandbar-button`,
  templateUrl: './commandbar-button.component.html',
  styleUrls: ['./commandbar-button.component.scss'],
  providers: [{ provide: CommandbarItemComponent, useExisting: forwardRef(() => CommandbarButtonComponent) }],
})
export class CommandbarButtonComponent extends CommandbarItemComponent {
  /**
   * Whether this is an action button.
   */
  isCommandbarActionButton = false;

  /**
   * The buttons font-icon.
   */
  @Input() icon: string;

  /**
   * Whether the button shall be disabled.
   */
  @Input() disabled = false;

  /**
   * Optional tooltip to describe the action.
   */
  @Input() tooltip = '';

  /**
   * Optional tooltip disable flag.
   */
  @Input() tooltipDisabled = false;

  /**
   * Whether the button is styled as active or not
   */
  @Input() active = false;

  /**
   * Used for testing! If set to value not equal null, the button will contain an data-test attribute with given value.
   */
  @Input() dataTest: string = null;

  /**
   * Optional aria-label for the button
   */
  @Input() ariaLabel: string = null;

  /**
   * Boolean Variable to show/hide Optional label for the button
   */
  @Input() renderLargeVariant = true;

  @Input()
  set moreActionsButtonBadge(value: number) {
    if (value || value === 0) {
      this._moreActionsButtonBadge = value;
    }
  }

  get moreActionsButtonBadge(): number {
    return this._moreActionsButtonBadge;
  }

  _moreActionsButtonBadge: number;

  /**
   * The button's click event emitter.
   */
    // eslint-disable-next-line @angular-eslint/no-output-native
  @Output() click = new EventEmitter<any>();

  _ngClass: string | string[] | Set<string> | { [klass: string]: any } = {};
  _ngStyle: { [key: string]: string } = {};

  @Input()
  set ngClass(v: string | string[] | Set<string> | { [klass: string]: any }) {
    this._ngClass = v;
  }

  @Input()
  set ngStyle(v: { [key: string]: string }) {
    this._ngStyle = v;
  }

  get both() {
    return this.render && this.renderLargeVariant;
  }

  clickEvent(event: Event) {
    // only proxy click-event if there is an observer for the host's click event
    // this is necessary for e.g. the mat-menu trigger button to work
    if (this.click.observers.length > 0) {
      event.stopPropagation();
      this.click.next(event);
    }
  }
}
