import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Ingredient } from '../../app.model';

@Component({
  selector: 'app-machine',
  imports: [],
  templateUrl: './machine.component.html',
  styleUrl: './machine.component.scss'
})
export class MachineComponent {
  activeTab: string = 'liquid';

  @Input() ingredients: Ingredient[] = [];
  @Output() bubbleTeaSubmitted = new EventEmitter<Ingredient[]>();

  selectedIngredients: Ingredient[] = [];

  get liquidIngredients(): Ingredient[] {
    return this.ingredients.filter(i => i.type === 'liquid');
  }

  get tapiocaIngredients(): Ingredient[] {
    return this.ingredients.filter(i => i.type === 'tapioca');
  }

  setActiveTab(tab: string): void {
    this.activeTab = tab;
  }

  toggleIngredientSelection(ingredient: Ingredient): void {
    const index = this.selectedIngredients.indexOf(ingredient);
    if (index === -1) {
      this.selectedIngredients.push(ingredient);
    } else {
      this.selectedIngredients.splice(index, 1);
    }
  }

  onSubmitBubbleTea(): void {
    this.bubbleTeaSubmitted.emit(this.selectedIngredients);
    this.clearSelection();
  }

  clearSelection(): void {
    this.selectedIngredients = [];
  }

  isSelected(ingredient: Ingredient): boolean {
    return this.selectedIngredients.includes(ingredient);
  }
}
