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

import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostBinding,
  Input,
  TemplateRef,
  ViewChild,
} from '@angular/core';

@Component({
  selector: `bci-commandbar-item`,
  templateUrl: './commandbar-item.component.html',
})
export class CommandbarItemComponent implements AfterViewInit {
  /**
   * Set item-class on host element if rendered directly.
   */
  @HostBinding('class.commandbar-item') classCommandbarItem = true;

  /**
   * Whether to render the item in-place instead of using a template outlet.
   */
  @Input() render = true;

  /**
   * When to hide the item in a submenu. Valid values are:
   * * empty: always hidden
   * * boolean: hidden if true, shown otherwise
   * * non-empty string: Checked against ObservableMedia.isActive (see https://github.com/angular/flex-layout/wiki/ObservableMedia)
   *                     either supporting css-media-queries or predefined aliases mobile, tablet and desktop.
   * @deprecated In a future release the commandbar items will behave responsive on the available space without hide attribute.
   */
  @Input() hide: string | string[] | boolean;

  /**
   * Whether to render the large variant (e.g. including label) of the item.
   */
  @Input() renderLargeVariant = true;

  /**
   * The reference to the item's template.
   */
  @ViewChild('template') template: TemplateRef<any>;

  public elementWidth: number;

  constructor(private elRef: ElementRef, private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    if (this.elRef && this.elRef.nativeElement) {
      this.elementWidth = this.elRef.nativeElement.offsetWidth;
    }
  }

  triggerChangeDetection() {
    if (!this.cdr['destroyed']) {
      this.cdr.detectChanges();
    }
  }
}
