import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { CatalogLayoutMode } from '../../../../../core/products/models/catalog-experience.model';
import { Product } from '../../../../../core/products/models/product-domain.model';
import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';
import { LanguageService } from '../../../../../services/language.service';
import { getTranslatedField, trackByItemId } from '../../../../../utils/item.utils';

@Component({
  selector: 'app-catalog-product-grid',
  standalone: true,
  imports: [ProductCardComponent, TranslatePipe],
  templateUrl: './product-grid.component.html',
  styleUrls: ['./product-grid.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CatalogProductGridComponent {
  @Input({ required: true }) products: Product[] = [];
  @Input() layout: CatalogLayoutMode = 'grid';
  @Input() showRatings = true;
  @Input() showDiscounts = true;
  @Input() showAvailability = true;
  @Input() showActionsPlaceholder = false;
  @Input() showShareAction = false;
  @Input() favoriteIds: number[] = [];
  @Input() comparedIds: number[] = [];

  @Output() productSelected = new EventEmitter<Product>();
  @Output() addToCart = new EventEmitter<{ product: Product; event: Event }>();
  @Output() productPreview = new EventEmitter<number>();
  @Output() quickView = new EventEmitter<number>();
  @Output() favoriteToggled = new EventEmitter<Product>();
  @Output() compareToggled = new EventEmitter<Product>();
  @Output() shareRequested = new EventEmitter<Product>();

  private readonly languageService = inject(LanguageService);

  readonly trackByItemId = trackByItemId;

  productTitle(product: Product): string {
    return getTranslatedField(product, 'name', this.languageService.currentLanguage());
  }

  productDescription(product: Product): string {
    return getTranslatedField(product, 'simpleDescription', this.languageService.currentLanguage());
  }

  onAddToCart(product: Product, event: Event): void {
    this.addToCart.emit({ product, event });
  }

  isFavorite(product: Product): boolean {
    return this.favoriteIds.includes(product.itemID);
  }

  isCompared(product: Product): boolean {
    return this.comparedIds.includes(product.itemID);
  }

  layoutClass(): string {
    switch (this.layout) {
      case 'grid-2':
        return 'grid grid-2 catalog-layout-grid-2';
      case 'grid-3':
        return 'grid grid-3 catalog-layout-grid-3';
      case 'grid-4':
        return 'grid grid-4 catalog-layout-grid-4';
      case 'large-grid':
        return 'grid grid-3 catalog-layout-large-grid';
      case 'compact':
        return 'grid grid-4 catalog-layout-compact';
      case 'compact-grid':
        return 'grid grid-4 catalog-layout-compact-grid';
      case 'list':
        return 'catalog-layout-list';
      case 'grid':
      default:
        return 'grid grid-4 catalog-layout-grid';
    }
  }
}
