import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IOperationsColBtn, IRow } from '../table.type';

@Component({
  selector: 'bixi-table-operations-group',
  template: `
    <li
      *ngIf="visibleNoChildren"
      nz-tooltip
      nz-menu-item
      [nzTooltipTitle]="operationGroup.tooltip"
      [nzDisabled]="operationGroup.disabled"
      (click)="onClick()"
    >
      {{ operationGroup.name }}
    </li>
    <li
      *ngIf="visibleHasChildren"
      nz-tooltip
      nz-submenu
      [nzTooltipTitle]="operationGroup.tooltip"
      [nzDisabled]="operationGroup.disabled"
      [nzTitle]="operationGroup.name"
      (click)="onClick()"
    >
      <ul>
        <ng-container *ngFor="let item of operationGroup.children">
          <bixi-table-operations-group [operationGroup]="item" [row]="row" [rowIndex]="rowIndex"></bixi-table-operations-group>
        </ng-container>
      </ul>
    </li>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BixiOperationsGroupComponent {
  @Input() operationGroup: IOperationsColBtn;
  @Input() rowIndex: number;
  @Input() row: IRow;

  onClick() {
    if (!this.operationGroup.disabled && this.operationGroup.onClick) this.operationGroup.onClick(this.row, this.rowIndex);
  }

  get visibleNoChildren() {
    return !this.hasChildren() && this.operationGroup.visible;
  }

  get visibleHasChildren() {
    return this.hasChildren() && this.operationGroup.visible;
  }

  private hasChildren() {
    return this.operationGroup.children && this.operationGroup.children.length > 0;
  }
}