import { CdkScrollable } from '@angular/cdk/scrolling';
import { AsyncPipe } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
import { MatButton } from '@angular/material/button';
import { MatOption } from '@angular/material/core';
import {
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogTitle,
  MatDialogContent,
  MatDialogActions,
  MatDialogClose,
} from '@angular/material/dialog';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { Observable, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

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

@Component({
  selector: 'app-issue-dialog',
  templateUrl: './issue-dialog.component.html',
  styleUrls: ['./issue-dialog.component.css'],
  standalone: true,
  imports: [
    MatDialogTitle,
    CdkScrollable,
    MatDialogContent,
    ReactiveFormsModule,
    MatFormField,
    MatLabel,
    MatInput,
    MatAutocompleteTrigger,
    MatAutocomplete,
    MatOption,
    MatDialogActions,
    MatButton,
    MatDialogClose,
    AsyncPipe,
  ],
})
export class IssueDialogComponent implements OnInit {
  batches: Observable<Batch[]>;
  form: FormGroup<{
    batch: FormControl<string | null>;
    quantity: FormControl<string>;
  }>;

  batch: Batch = new Batch();

  constructor(
    public dialogRef: MatDialogRef<IssueDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { inventory: Inventory; date: string },
    private math: MathService,
    private batchSer: BatchService,
  ) {
    this.form = new FormGroup({
      batch: new FormControl<string | null>(null),
      quantity: new FormControl<string>('', { nonNullable: true }),
    });
    // Listen to Batch Autocomplete Change
    this.batches = this.form.controls.batch.valueChanges.pipe(
      debounceTime(150),
      distinctUntilChanged(),
      switchMap((x) => (x === null ? observableOf([]) : this.batchSer.autocomplete(this.data.date, x))),
    );
  }

  ngOnInit() {
    this.form.setValue({
      batch: this.data.inventory.batch.name,
      quantity: `${this.data.inventory.quantity}`,
    });
    this.batch = this.data.inventory.batch;
  }

  displayFn(batch?: Batch | string): string {
    return !batch ? '' : typeof batch === 'string' ? batch : batch.name;
  }

  batchSelected(event: MatAutocompleteSelectedEvent): void {
    this.batch = event.option.value as Batch;
  }

  accept(): void {
    const formValue = this.form.value;
    const quantity = this.math.parseAmount(formValue.quantity, 2);
    this.data.inventory.batch = this.batch;
    this.data.inventory.quantity = quantity;
    this.data.inventory.rate = this.batch.rate;
    this.data.inventory.tax = this.batch.tax;
    this.data.inventory.discount = this.batch.discount;
    this.data.inventory.amount = quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount);
    this.dialogRef.close(this.data.inventory);
  }
}