import { Component, Input, Output, EventEmitter } from '@angular/core';
import { SpaAppChannelI, SpaAppChannelTypeEnum } from '@softpak/ng-components/spa-app-configuration';

@Component({
  selector: 'spa-welcome',
  template: `<div class="flex flex-col gap-3">
    <spn-button [spfFullWidth]="true" *ngFor="let channel of filteredChannels" (click)="onSelectChannel(channel)">
      {{ channel.brand }}
    </spn-button>
  </div>`,
})
export class SpaWelcomeComponent {
  @Input() public channels?: SpaAppChannelI[] = [];
  @Output() public spaSelected: EventEmitter<SpaAppChannelI> = new EventEmitter<SpaAppChannelI>();

  get filteredChannels () { return (this.channels ?? [])?.filter(channel => channel.channelTypes.includes(SpaAppChannelTypeEnum.production)); }

  constructor(
  ) { }

  onSelectChannel(channel: SpaAppChannelI) {
    this.spaSelected.emit(channel);
  }
}
