import {
  ChangeDetectionStrategy,
  Component,
  inject,
  input,
  linkedSignal,
  computed,
} from '@angular/core';
import { Item } from '@isa/catalogue/data-access';
import { ClientRowImports, ItemRowDataImports } from '@isa/ui/item-rows';
import { Breakpoint, breakpoint } from '@isa/ui/layout';
import { CheckoutMetadataService } from '@isa/checkout/data-access';
import { ProductInfoRedemptionComponent } from '@isa/checkout/shared/product-info';
import { StockInfoComponent } from '@isa/checkout/shared/product-info';
import { RewardListItemSelectComponent } from './reward-list-item-select/reward-list-item-select.component';
import { injectTabId } from '@isa/core/tabs';

@Component({
  selector: 'reward-list-item',
  templateUrl: './reward-list-item.component.html',
  styleUrl: './reward-list-item.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    ClientRowImports,
    ItemRowDataImports,
    ProductInfoRedemptionComponent,
    StockInfoComponent,
    RewardListItemSelectComponent,
  ],
})
export class RewardListItemComponent {
  #checkoutMetadataService = inject(CheckoutMetadataService);

  tabId = injectTabId();

  selectedBranchId = computed(() => {
    const tabid = this.tabId();
    if (!tabid) {
      return null;
    }
    return this.#checkoutMetadataService.getSelectedBranch(tabid)?.id;
  });

  item = input.required<Item>();

  desktopBreakpoint = breakpoint([
    Breakpoint.Desktop,
    Breakpoint.DesktopL,
    Breakpoint.DesktopXL,
  ]);
  productInfoOrientation = linkedSignal(() => {
    return this.desktopBreakpoint() ? 'horizontal' : 'vertical';
  });
}
