import { computed, Directive, inject, input } from '@angular/core';
import { ProductImageService } from './product-image.service';

@Directive({ selector: 'img[sharedProductImage]', host: { '[src]': 'src()' } })
export class ProductImageDirective {
  readonly productImageService = inject(ProductImageService);

  ean = input.required<string>();

  imageWidth = input<number>(150);

  imageHeight = input<number>(150);

  src = computed(() => {
    const ean = this.ean();
    const width = this.imageWidth();
    const height = this.imageHeight();
    return this.productImageService.getImageUrl({ imageId: ean, height, width });
  });
}
