import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs';
import { CollectingShelfOrder } from 'apps/sales/src/app/core/models/collecting-shelf-order.model';
import { Router } from '@angular/router';
import { Store } from '@ngxs/store';
import { AddBreadcrumb } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
import { Breadcrumb } from 'apps/sales/src/app/core/models/breadcrumb.model';
import { ChangeCurrentRoute } from 'apps/sales/src/app/core/store/actions/process.actions';
import { SHELF_SCROLL_INDEX } from 'apps/sales/src/app/core/utils/app.constants';

@Component({
  selector: 'app-shelf-customer-order',
  templateUrl: './customer-order.component.html',
  styleUrls: ['./customer-order.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShelfCustomerOrderComponent implements OnInit, OnDestroy {
  @Input() order: CollectingShelfOrder;
  @Input() last: boolean;
  @Input() index: number;
  @Input() processId: number;
  id: string;
  destroy$ = new Subject();

  constructor(private router: Router, private store: Store) {}

  ngOnInit() {
    this.id = `shelf-order-${this.index}`;
  }

  ngOnDestroy() {
    this.destroy$.next();
  }

  details() {
    if (this.order.compartmentCode || this.order.orderId) {
      sessionStorage.setItem(SHELF_SCROLL_INDEX, this.index + ':' + this.processId);
      const path = `/shelf/details/${this.order.compartmentCode ? this.order.compartmentCode : this.order.orderId}/${this.order.orderId}/${
        this.order.processingStatus
      }/${this.order.compartmentCode ? 'c' : 'o'}`;
      this.store.dispatch(
        new AddBreadcrumb(
          <Breadcrumb>{
            name: this.order.firstName + ' ' + this.order.lastName,
            path: path,
          },
          'shelf'
        )
      );
      this.store.dispatch(new ChangeCurrentRoute(path));
      this.router.navigate([path]);
    }
  }
}
