import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { CatalogLayoutMode } from '../../../../../core/products/models/catalog-experience.model';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';

@Component({
  selector: 'app-catalog-layout-switcher',
  standalone: true,
  imports: [TranslatePipe],
  templateUrl: './layout-switcher.component.html',
  styleUrls: ['./layout-switcher.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CatalogLayoutSwitcherComponent {
  @Input() active: CatalogLayoutMode = 'grid-4';
  @Input() available: CatalogLayoutMode[] = ['grid-2', 'grid-3', 'grid-4', 'list', 'compact'];

  @Output() activeChange = new EventEmitter<CatalogLayoutMode>();

  readonly labels: Record<CatalogLayoutMode, string> = {
    grid: 'catalog.layoutGrid4',
    'large-grid': 'catalog.layoutGrid2',
    'compact-grid': 'catalog.layoutCompact',
    'grid-2': 'catalog.layoutGrid2',
    'grid-3': 'catalog.layoutGrid3',
    'grid-4': 'catalog.layoutGrid4',
    compact: 'catalog.layoutCompact',
    list: 'catalog.layoutList'
  };
}
