import { Directive, HostListener } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

/* is used to: if a selected step is out of visibility, stepper screen is scrolled automatically to show it */

@Directive({
  standalone: true,
  selector: '[mat-vertical-stepper-scroller]',
})
export class MatVerticalStepperScrollerDirective {
  constructor(private stepper: MatStepper) {}

  @HostListener('animationDone')
  selectionChanged() {
    const stepId = this.stepper._getStepLabelId(this.stepper.selectedIndex);
    const stepElement = document.getElementById(stepId);
    if (stepElement) {
      stepElement.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
    }
  }
}
