import {
  Component,
  Input,
  Output,
  EventEmitter,
  OnChanges,
  SimpleChanges,
} from "@angular/core";

export type ToolbarItem = {
  label: string;
  icon: ToolbarItemIcon;
  disabled?: boolean;
  showMore?: boolean;
};

export type ToolbarItemIcon =
  "fa-download" | "fa-share-alt" | "fa-filter" | "fa-chevron-circle-left";

@Component({
  selector: "sam-actions",
  template: `
    <div class="section right">
      <ng-container *ngFor="let item of contentModel">
        <button
          *ngIf="!item.showMore"
          class="sam button tertiary small"
          [ngClass]="{ disabled: item?.disabled }"
          [disabled]="item?.disabled"
          (click)="actionClick(item)"
          (keyup.enter)="actionClick(item)"
        >
          <i class="fa {{ item?.icon }}" aria-hidden="true"></i>
          {{ item?.label }}
        </button>
      </ng-container>
      <sam-actions-dropdown
        *ngIf="showMoreActions.length > 0"
        [text]="'More'"
        [actions]="showMoreActions"
        (emitAction)="dropdownClick($event)"
      >
      </sam-actions-dropdown>
    </div>
  `,
  standalone: false,
})
export class SamActionsListComponent implements OnChanges {
  /**
   * Passes in the content model for the top right items+icons
   */
  @Input() contentModel: ToolbarItem[] = [];
  /**
   * Emitter for interaction handling
   */
  @Output() action: EventEmitter<ToolbarItem> = new EventEmitter<ToolbarItem>();
  public showMoreActions: ToolbarItem[] = [];

  public actionClick(item: ToolbarItem) {
    if (!item.disabled) {
      this.action.emit(item);
    }
  }

  public dropdownClick(item: { label: string }) {
    const matchedItem = this.contentModel.find((modelItem) => {
      if (modelItem.label === item.label) {
        return true;
      }
    });
    if (matchedItem) {
      this.actionClick(matchedItem);
    }
  }

  public ngOnChanges(c: SimpleChanges) {
    if (c.contentModel && this.contentModel) {
      this.showMoreActions = [];
      for (const item of this.contentModel) {
        if (item.showMore) {
          const showMoreAction = {
            name: item.label,
            label: item.label,
            icon: "fa " + item.icon,
          } as unknown as ToolbarItem;
          this.showMoreActions.push(showMoreAction);
        }
      }
    }
  }
}