import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material';
import { contributorValidator } from '../contributor-validator';
import { Transaction } from '../transaction';

export interface ValDisplay {
  value: number;
  display: string;
}

export interface DialogData {
  contributors: ValDisplay[],
  funds: ValDisplay[],
  types: ValDisplay[],
  contributor: ValDisplay,
  date: string,
  typeId: number,
  fundId: number,
  checkNumber: string,
  description: string,
  taxYear: number
}


@Component({
  selector: 'app-add-transaction-popup',
  templateUrl: './add-transaction-popup.component.html',
  styleUrls: ['./add-transaction-popup.component.css']
})
export class AddTransactionPopupComponent implements OnInit {

  form: FormGroup;

  saveBtnDisabled: boolean = false;
  saveBtnTxt: string = 'Save';
  saveAndAddBtnTxt: string = 'Save & Add';
  contributors: ValDisplay[] = [];
  filteredContributors: ValDisplay[]
  funds: ValDisplay[];
  types: ValDisplay[];

  constructor(private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: DialogData, private dialogRef:MatDialogRef<AddTransactionPopupComponent>) {
    this.contributors = this.data.contributors || [];
    this.funds   = this.data.funds || [];
    this.types = this.data.types || [];
    
    const date = new Date();
    const dte = date.getFullYear() + "-" + (date.getMonth()<10?'0':'') + (date.getMonth() + 1) + "-" + (date.getDate()<10?'0':'') + date.getDate();

    this.form = this.formBuilder.group({
      date: [this.data.date || dte, [Validators.required]],
      contributor: [this.data.contributor, [Validators.required, contributorValidator(this.contributors)]],
      typeId: [this.data.typeId || 1, [Validators.required]],
      fundId: [this.data.fundId || 1, [Validators.required]],
      checkNumber: [this.data.checkNumber],
      description: [this.data.description],
      amount: ['', [Validators.required]],
      taxYear: [this.data.taxYear || new Date().getFullYear(), [Validators.required]]
    });
  }

  ngOnInit() {
  }

  contributorDisplayFn(contributor?: {value:number,display:string}): string | undefined {
    return contributor ? contributor.display : undefined;
  }

  onContributorChange(event) {
    if (event && event.value) {
      if (event.value === -1) {
        // Open new user dialog
      }
      event = event.display;
    }
    const filterValue = event.toLowerCase();
    this.filteredContributors = this.contributors.filter(option => option.display.toLowerCase().indexOf(filterValue) >= 0);
    if (this.filteredContributors.length === 0) {
      this.filteredContributors.push({value:-1, display:'Add New Contributor'});
    }
  }

  onSubmit(saveAndAdd: boolean = false) {
    const trans = new Transaction();
    trans.amount = this.form.value.amount;
    trans.checkNumber = this.form.value.checkNumber;
    trans.contributorId = this.form.value.contributor.value;
    trans.date = this.form.value.date;
    trans.description = this.form.value.description;
    trans.fundId = this.form.value.fundId;
    trans.taxYear = this.form.value.taxYear;
    trans.typeId = this.form.value.typeId;
    this.dialogRef.close({transaction:trans,saveAndAdd:saveAndAdd});
  }

  cancel() {
    this.dialogRef.close();
  }

}