import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input } from '@angular/core';
import { StepperComponent } from './stepper.component';

@Component({
  selector: 'app-step',
  imports: [],
  templateUrl: './step.component.html',
  styleUrl: './step.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StepComponent {
  stepper = inject(forwardRef(() => StepperComponent));
  
  readonly label = input.required<string>();
  readonly isValid = input(true);

  // We compute the index by looking at the parent's steps array
  index = computed(() => {
    const steps = this.stepper.steps();
    return steps.findIndex((step: StepComponent) => step === this);
  });

  isActive = computed(() => this.stepper.currentStepIndex() === this.index());
  isCompleted = computed(() => this.stepper.currentStepIndex() > this.index());
  isLast = computed(() => this.stepper.steps().length - 1 === this.index());
}
