import { Component, computed, signal } from '@angular/core';
import { CategoryService } from '../../services/category.service';
import { MerchantService } from '../../services/merchant.service';
import { Tag, TagService } from '../../services/tag.service';
import { form, FormField } from '@angular/forms/signals';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { provideNativeDateAdapter } from '@angular/material/core';

interface AddExpenseForm {
  date: Date,
  amount: number | string,
  categoryId: string,
  merchantId: string,
  note: string,
  tags: Tag[]
}

@Component({
  selector: 'app-add-expense',
  imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField],
  providers: [provideNativeDateAdapter()],
  templateUrl: './add-expense.component.html',
  styleUrl: './add-expense.component.scss',
})
export class AddExpenseComponent {
  protected categories = computed(() => this.categoryService.categories());
  protected merchants = computed(() => this.merchantService.merchants());
  protected tags = computed(() => this.tagService.tags());
  private addExpenseModel = signal<AddExpenseForm>({
    date: new Date(),
    amount: '',
    categoryId: '',
    merchantId: '',
    note: '',
    tags: []
  });
  public expenseForm = form(this.addExpenseModel);

  public constructor(private readonly categoryService: CategoryService,
                     private readonly merchantService: MerchantService,
                     private readonly tagService: TagService) { }
}