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

interface MenuItem {
  id: number;
  name: string;
}

@Component({
  selector: 'app-menu',
  template: `
              <button class="app-menu__button"
                      [disabled]="disabled"
                      (click)="isOpen = !isOpen">
                {{ menuButtonName }}
              </button>
              <app-dropdown-list
                class="app-menu__dropdown-list"
                *ngIf="isOpen && menuItems?.length > 0"
                (appClickOutside)="isOpen = !isOpen"
                [items]="menuItems"
                (selectItem)="select($event)"></app-dropdown-list>`,
  styles: [`
    :host {
      position: relative;
      display: inline-block;
    }

    .app-menu__button {
      background:    #ffffff;
      border:        solid 1px #cccccc;
      color:         #333333;
      border-radius: 3px;
      display:       inline-block;
      box-sizing:    border-box;
      height:        30px;
      line-height:   30px;
      padding:       0 8px;
      white-space:   nowrap;
      font-size:     12px;
      font-weight:   600;
      cursor:        pointer;
      user-select:   none;
      vertical-align: middle;
      outline: none;
    }

    .app-menu__dropdown-list {
      min-width: 100%;
      top: 33px;
    }
  `]
})

export class FbaMenuComponent {
  isOpen = false;

  @Input() menuButtonName: string;
  @Input() menuItems: MenuItem [];
  @Input() disabled: boolean;
  @Output() click = new EventEmitter();

  select (item) {
    this.isOpen = !this.isOpen;
    this.click.emit(item);
  }
}