import { ProductMapping } from '../../../../core/mappings/product.mapping';
import { ChangeCurrentRoute, AddProcess } from '../../../../core/store/actions/process.actions';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Search } from '../../../../core/models/search.model';
import { Router } from '@angular/router';
import { Store, Select } from '@ngxs/store';
import { Process } from '../../../../core/models/process.model';
import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
import { ProductService } from '../../../../core/services/product.service';
import { AddSelectedProduct } from '../../../../core/store/actions/product.actions';
import { Observable, Subject } from 'rxjs';
import { BarcodeScannerScanditComponent } from 'shared/lib/barcode-scanner';
import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions';
import { takeUntil } from 'rxjs/operators';
import { ProcessSelectors } from '../../../../core/store/selectors/process.selectors';
import { ItemDTO } from '@swagger/cat';

@Component({
  selector: 'app-barcode-search',
  templateUrl: 'barcode-search.component.html',
  styleUrls: ['barcode-search.component.scss'],
})
export class BarcodeSearchComponent implements OnInit, OnDestroy {
  @ViewChild('scanner') scanner: BarcodeScannerScanditComponent;
  @Select(ProcessSelectors.getProcesses) processes$: Observable<Process[]>;
  processes: Process[] = [];
  scanningVisible = false;
  destroy$ = new Subject();

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

  ngOnInit() {
    this.processes$.pipe(takeUntil(this.destroy$)).subscribe((p: Process[]) => (this.processes = p));
  }

  triggerSearch(barcode) {
    if (this.processes.length < 1) {
      this.createProcess();
    }
    const search = <Search>{
      query: barcode,
      fitlers: [],
      take: 10,
      skip: 0,
      firstLoad: true,
    };
    this.productService
      .searchItems(search)
      .pipe(takeUntil(this.destroy$))
      .subscribe((items: ItemDTO[]) => {
        if (items.length > 0) {
          const product = new ProductMapping().fromItemDTO(items[0]);
          this.store.dispatch(new AddSelectedProduct(items[0], 0));
          const currentRoute = '/product/details/' + product.id;
          this.store.dispatch(new ChangeCurrentRoute(currentRoute));
          this.router.navigate([currentRoute]);
        } else {
          this.scanner.scanToggle();
        }
      });
  }

  createProcess() {
    const newProcess = <Process>{
      id: 1,
      name: 'Vorgang 1',
      currentRoute: '/product/search',
    };

    this.store.dispatch(new AddProcess(newProcess));
    this.store.dispatch(
      new AddBreadcrumb(
        <Breadcrumb>{
          name: 'Artikelsuche',
          path: '/product/search',
        },
        'product',
        true
      )
    );
  }

  toggleScan() {
    this.scanningVisible = !this.scanningVisible;
  }

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