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

export type RowActionType =
  | 'action'
  | 'icon'
  | 'option';

/**
 * This component represents one of 3 possible actions for a datatable row:
 *   - action: A `View` action
 *   - icon: An icon button
 *   - option: A nested option hidden behind a `mat_show_more`
 *
 * Each component should explicitly declare its `type` (except for `option`
 * since they are the default type). In addition, `action` and `icon` row-actions
 * should include the `[top-level]` attribute, while `option` row-actions should
 * include the `[nested]` attribute.
 *
 * This component should only appear within a `<row-actions>` block.
 *
 * Example usage:
 *
 * ```
 * <row-actions>
 *   <row-action top-level
 *     type="action"
 *     [when]="shouldShowAction"
 *     (action)="doSomething()"></row-action>
 *   <row-action top-level
 *     type="icon"
 *     [when]="shouldShowIcon"
 *     (action)="doSomethingElse()"></row-action>
 *   <row-action nested
 *     [when]="showShowOption1"
 *     (action)="doAnotherThing()"></row-action>
 *   <row-action nested
 *     (action)="doADifferentThing()"></row-action>
 * </row-actions>
 * ```
 */
@Component({
  selector: 'row-action',
  templateUrl: './row-action.component.html',
  styleUrls: ['./row-action.component.scss']
})
export class RowActionComponent implements OnInit {
  @Input() type: RowActionType = 'option';
  @Input() label!: string;
  @Input() color!: string;
  @Input() icon!: string;
  @Input() disabled = false;
  @Input() link!: string[];
  _when!: boolean;
  get when() { return this._when; }
  @Input() set when(val: boolean) {
    this._when = Boolean(val);
    this.visibilityChanges.emit(this._when);
  }
  @Output() action = new EventEmitter();
  @Output() visibilityChanges: EventEmitter<boolean> = new EventEmitter();

  get shouldRender(): boolean {
    return typeof this.when === 'undefined' || this.when === true;
  }

  constructor() {}

  ngOnInit() {}
}