import { Directive, HostListener, inject, input } from '@angular/core';
import { PreviewHighlightService } from '../../services/preview-highlight.service';

/**
 * Attach to any field/control wrapper: `<label appHighlightSource="logo">`.
 * On hover or keyboard focus it tells PreviewHighlightService which schematic
 * preview element to highlight; clears on leave/blur.
 */
@Directive({
  selector: '[appHighlightSource]',
  standalone: true,
})
export class HighlightSourceDirective {
  private readonly highlight = inject(PreviewHighlightService);

  readonly appHighlightSource = input.required<string>();

  @HostListener('mouseenter')
  @HostListener('focusin')
  onActivate(): void {
    this.highlight.set(this.appHighlightSource());
  }

  @HostListener('mouseleave')
  @HostListener('focusout')
  onDeactivate(): void {
    if (this.highlight.activeId() === this.appHighlightSource()) {
      this.highlight.set(null);
    }
  }
}
