import { CurrencyPipe, NgClass } from '@angular/common';
import { Component, input } from '@angular/core';
import { RemissionItem } from '@isa/remission/data-access';
import { ProductImageDirective } from '@isa/shared/product-image';
import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
import { ProductFormatComponent } from '@isa/shared/product-format';
import { PrioLabelComponent } from '@isa/ui/label';

export type ProductInfoItem = Pick<
  RemissionItem,
  'product' | 'retailPrice' | 'tag'
>;

export type ProductInfoOrientation = 'horizontal' | 'vertical';

export const RemissionItemTags = {
  Prio1: 'Prio 1',
  Prio2: 'Prio 2',
  Pflicht: 'Pflicht',
} as const;

@Component({
  selector: 'remi-product-info',
  templateUrl: 'product-info.component.html',
  imports: [
    NgClass,
    ProductImageDirective,
    ProductRouterLinkDirective,
    CurrencyPipe,
    ProductFormatComponent,
    PrioLabelComponent,
  ],
  host: {
    '[class]': 'classList',
    'data-what': 'product-info',
    'data-which': 'remission-product',
    '[attr.data-ean]': 'item().product.ean',
  },
})
export class ProductInfoComponent {
  RemissionItemTags = RemissionItemTags;
  readonly classList: ReadonlyArray<string> = [
    'grid',
    'grid-cols-[3.5rem,1fr]',
    'gap-6',
    'text-isa-neutral-900',
  ];

  item = input.required<ProductInfoItem>();

  orientation = input<ProductInfoOrientation>('horizontal');

  innerGridClass = input<string>('grid-cols-[minmax(20rem,1fr),auto]');
}
