import { Component, ChangeDetectionStrategy } from '@angular/core';
import { DomainAvailabilityService } from '@domain/availability';
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';

@Component({
  selector: 'page-take-away-option',
  templateUrl: 'take-away-option.component.html',
  styleUrls: ['../option.scss', 'take-away-option.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TakeAwayOptionComponent {
  readonly item$ = this._purchasingOptionsModalStore.selectItem;

  readonly availability$ = this._purchasingOptionsModalStore.selectAvailabilities.pipe(map((ava) => ava['take-away']));

  readonly price$ = combineLatest([this.availability$, this.item$]).pipe(
    map(([availability, item]) => this._availabilityService.getPriceForAvailability('take-away', item.catalogAvailability, availability))
  );

  constructor(private _purchasingOptionsModalStore: PurchasingOptionsModalStore, private _availabilityService: DomainAvailabilityService) {}

  select() {
    this._purchasingOptionsModalStore.setOption('take-away');
  }
}
