import {Component, Input, ViewChild} from '@angular/core';
import {RecipeStep} from "../../../shared/model/recipe.model";
import {MatTable} from "@angular/material/table";

@Component({
  selector: 'cre-step-table',
  templateUrl: './step-table.component.html',
  styleUrls: ['./step-table.component.sass']
})
export class StepTableComponent {
  @ViewChild('stepTable', {static: true}) stepTable: MatTable<RecipeStep>
  readonly columns = ['position', 'message', 'buttonRemove']

  @Input() steps: RecipeStep[]

  addStep() {
    this.steps.push({id: null, message: ""})
    this.stepTable.renderRows()
  }

  removeStep(position: number) {
    this.steps.splice(position, 1)
    this.stepTable.renderRows()
  }
}
