import { Maybe } from '@/core';
import { SearchInputComponent } from '@/shared/components/search/search-input.component';
import { Component, computed, inject, Input, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SelectButton } from 'primeng/selectbutton';
import { POSStore, TViewType } from '../../store';
import { PosProductCategoriesComponent } from './categories.component';
import { PosProductsGridViewComponent } from './grid-view.component';
import { PosProductsListViewComponent } from './list-view.component';

@Component({
  selector: 'pos-products',
  templateUrl: './products.component.html',
  imports: [
    PosProductCategoriesComponent,
    PosProductsListViewComponent,
    SelectButton,
    FormsModule,
    PosProductsGridViewComponent,
    SearchInputComponent,
  ],
})
export class PosProductsComponent {
  @Input() activeCategory = signal<Maybe<number>>(null);

  private readonly store = inject(POSStore);

  constructor() {
    this.store.initial();
  }

  viewOptions = [
    { value: 'list', icon: 'pi pi-list' },
    { value: 'grid', icon: 'pi pi-th-large' },
  ];

  readonly activatedCategoryProducts = computed(() => this.store.activatedCategoryProducts());
  readonly stock = computed(() => this.store.stock());

  get viewType() {
    return this.store.viewType();
  }
  set viewType(val: TViewType) {
    this.store.updateViewType(val);
  }

  onSearch(searchTerm: string) {
    this.store.updateSearchQuery(searchTerm);
    this.store.getStock();
  }

  onCategoryChange(categoryId: number) {
    this.store.changeActiveCategory(categoryId);
  }
}
