import { Component, Input, OnInit } from '@angular/core';
import { ProductImageService } from '@cdn/product-image';
import { HistoryComponent } from '@modal/history';
import { OrderDTO, OrderItemDTO, OrderItemSubsetDTO } from '@swagger/oms';
import { UiModalService } from '@ui/modal';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'page-customer-order-item-card',
  templateUrl: 'customer-order-item-card.component.html',
  styleUrls: ['./customer-order-item-card.component.scss'],
})
export class CustomerOrderItemCardComponent implements OnInit {
  @Input()
  order: OrderDTO;

  @Input()
  orderItem: OrderItemDTO;

  imageUrl: Observable<string>;

  expand: boolean[];

  get subsetItems(): OrderItemSubsetDTO[] {
    return this.orderItem.subsetItems.map((subsetItem) => subsetItem.data);
  }

  constructor(private imageService: ProductImageService, private _modal: UiModalService) {}

  ngOnInit() {
    this.expand = new Array(this.subsetItems.length);
    this.imageUrl = of(
      this.imageService.getImageUrl({
        imageId: this.orderItem.product.ean,
        width: 60,
        height: 100,
      })
    );
  }

  ssc(subsetItem: OrderItemSubsetDTO) {
    if (subsetItem.ssc) {
      return `${subsetItem.ssc} - ${subsetItem.sscText}`;
    } else {
      return subsetItem.sscText;
    }
  }

  openHistory(orderItemSubsetId: number) {
    this._modal.open({
      content: HistoryComponent,
      title: 'Historie',
      config: { showScrollbarY: false },
      data: {
        mode: 'order',
        item: {
          order: this.order,
          orderItemSubsetId,
        },
      },
    });
  }
}
