import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
} from '@angular/core';
import { StockInfoResource } from '@isa/remission/data-access';
import { Branch } from '@isa/checkout/data-access';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { isaFiliale } from '@isa/icons';
import { Item } from '@isa/catalogue/data-access';
import { SkeletonLoaderComponent } from '@isa/ui/skeleton-loader';

export type StockInfoItem = {
  id: Item['id'];
  catalogAvailability: Pick<Item['catalogAvailability'], 'ssc' | 'sscText'>;
};

@Component({
  selector: 'checkout-stock-info',
  templateUrl: './stock-info.component.html',
  styleUrls: ['./stock-info.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NgIconComponent, SkeletonLoaderComponent],
  providers: [provideIcons({ isaFiliale })],
  exportAs: 'stockInfo',
})
export class StockInfoComponent {
  #stockInfoResource = inject(StockInfoResource);

  item = input.required<StockInfoItem>();

  branchId = input<number | null>(null);

  itemId = computed(() => this.item().id);

  readonly stockInfoResource = this.#stockInfoResource.resource(
    computed(() => {
      return {
        itemId: this.itemId(),
        branchId: this.branchId() ?? undefined,
      };
    }),
  );

  inStock = computed(() => this.stockInfoResource.value()?.inStock ?? 0);

  loading = computed(() => this.stockInfoResource.isLoading());
}
