import { Directive, effect, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { PRODUCT_ROUTER_LINK_BUILDER } from './product-router-link.providers';

@Directive({
  selector: '[sharedProductRouterLink]',
  host: {
    class: 'cursor-pointer',
  },
})
export class ProductRouterLinkDirective extends RouterLink {
  #builder = inject(PRODUCT_ROUTER_LINK_BUILDER);

  ean = input.required<string>();

  urlEffect = effect(async () => {
    const ean = this.ean();
    if (!ean) {
      return;
    }
    const url = await this.#builder(ean);
    this.routerLink = url;
  });
}
