import { Directive, HostListener, inject, Input } from '@angular/core';
import { ProductCatalogNavigationService } from '@shared/services/navigation';

@Directive({
  selector: '[productImageNavigation]',
  standalone: true,
})
export class NavigateOnClickDirective {
  @Input('productImageNavigation') ean: string;

  private readonly _productCatalogNavigation = inject(ProductCatalogNavigationService);

  @HostListener('click', ['$event'])
  async onClick(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    if (this.ean) {
      await this._navigateToProductSearchDetails();
    }
  }

  private async _navigateToProductSearchDetails() {
    await this._productCatalogNavigation
      .getArticleDetailsPathByEan({
        processId: Date.now(),
        ean: this.ean,
        extras: { queryParams: { main_qs: this.ean } },
      })
      .navigate();
  }
}
