import {
  ChangeDetectionStrategy,
  Component,
  inject,
  input,
  computed,
} from '@angular/core';
import { Item } from '@isa/catalogue/data-access';
import { ProductInfoComponent } from '@isa/remission/shared/product';
import { TextButtonComponent } from '@isa/ui/buttons';
import { Breakpoint, breakpoint } from '@isa/ui/layout';
import { SearchItemToRemitDialogComponent } from './search-item-to-remit-dialog.component';
import { injectDialog } from '@isa/ui/dialog';
import { SelectRemiQuantityAndReasonDialogComponent } from './select-remi-quantity-and-reason-dialog.component';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'remi-search-item-to-remit',
  templateUrl: './search-item-to-remit.component.html',
  styleUrls: ['./search-item-to-remit.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ProductInfoComponent, TextButtonComponent],
})
export class SearchItemToRemitComponent {
  host = inject(SearchItemToRemitDialogComponent);
  quantityAndReasonDialog = injectDialog(
    SelectRemiQuantityAndReasonDialogComponent,
  );

  item = input.required<Item>();
  inStock = input.required<number>();

  desktopBreakpoint = breakpoint([Breakpoint.DesktopL, Breakpoint.DesktopXL]);

  productInfoOrientation = computed(() => {
    return this.desktopBreakpoint() ? 'vertical' : 'horizontal';
  });

  async openQuantityAndReasonDialog() {
    if (this.item()) {
      const dialogRef = this.quantityAndReasonDialog({
        title: 'Dieser Artikel steht nicht auf der Remi Liste',
        data: {
          item: this.item(),
          inStock: this.inStock(),
        },
        width: '36rem',
      });
      const dialogResult = await firstValueFrom(dialogRef.closed);

      if (dialogResult) {
        this.host.close(dialogResult);
      }
    }
  }
}
