import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { round } from 'mathjs';
import { Observable, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';

import { Batch } from '../core/batch';
import { Inventory } from '../core/inventory';
import { Product } from '../core/product';
import { ProductService } from '../product/product.service';
import { MathService } from '../shared/math.service';

@Component({
  selector: 'app-purchase-dialog',
  templateUrl: './purchase-dialog.component.html',
  styleUrls: ['./purchase-dialog.component.css'],
})
export class PurchaseDialogComponent implements OnInit {
  products: Observable<Product[]>;
  form: FormGroup;
  product: Product = new Product();

  constructor(
    public dialogRef: MatDialogRef<PurchaseDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { inventory: Inventory },
    private fb: FormBuilder,
    private math: MathService,
    private productSer: ProductService,
  ) {
    this.form = this.fb.group({
      product: '',
      quantity: '',
      price: '',
      tax: '',
      discount: '',
    });
    // Listen to Product Autocomplete Change
    this.products = (this.form.get('product') as FormControl).valueChanges.pipe(
      startWith(null),
      map((x) => (x !== null && x.length >= 1 ? x : null)),
      debounceTime(150),
      distinctUntilChanged(),
      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocomplete(x, true))),
    );
  }

  ngOnInit() {
    this.form.setValue({
      product: this.data.inventory.batch?.sku,
      quantity: this.data.inventory.quantity,
      price: this.data.inventory.rate,
      tax: this.data.inventory.tax,
      discount: this.data.inventory.discount,
    });
    this.product = this.data.inventory.batch?.sku;
  }

  displayFn(product?: Product): string {
    return product ? product.name : '';
  }

  productSelected(event: MatAutocompleteSelectedEvent): void {
    this.product = event.option.value;
    (this.form.get('price') as FormControl).setValue(this.product.price);
  }

  accept(): void {
    const formValue = this.form.value;
    const quantity = this.math.parseAmount(formValue.quantity, 2);
    const price = this.math.parseAmount(formValue.price, 2);
    const tax = this.math.parseAmount(formValue.tax, 5);
    const discount = this.math.parseAmount(formValue.discount, 5);
    if (this.data.inventory.batch === null) {
      this.data.inventory.batch = new Batch();
    }
    this.data.inventory.batch.sku = this.product;
    this.data.inventory.quantity = quantity;
    this.data.inventory.rate = price;
    this.data.inventory.tax = tax;
    this.data.inventory.discount = discount;
    this.data.inventory.amount = round(quantity * price * (1 + tax) * (1 - discount), 2);
    this.dialogRef.close(this.data.inventory);
  }
}