import { CommonModule } from '@angular/common';
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BranchSelectorComponent } from '@shared/components/branch-selector';
import { BranchNamePipe } from '@shared/pipes/branch';
import { BranchDTO } from '@generated/swagger/checkout-api';
import { PurchaseOptionsStore } from '../store';
import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
import { AuthService } from '@core/auth';
import { IconComponent } from '@shared/components/icon';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-pickup-purchase-options-tile',
  templateUrl: 'pickup-purchase-options-tile.component.html',
  styleUrls: ['purchase-options-tile.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, IconComponent, BranchSelectorComponent, FormsModule, BranchNamePipe],
  host: { tabindex: '-1' },
})
export class PickupPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
  pickupBranch$ = this.store.pickupBranch$;

  hasNoInStoreAvailability$ = this.store.purchasingOptions$.pipe(map((po) => !po.includes('pickup')));

  constructor(
    protected store: PurchaseOptionsStore,
    protected cdr: ChangeDetectorRef,
    public auth: AuthService,
    private elementRef: ElementRef,
  ) {
    super('pickup');
  }

  setPickupBranch(branch?: BranchDTO) {
    this.setPurchaseOptions();
    this.store.setPickupBranch(branch);
    this.elementRef.nativeElement.focus();
  }
}
