import { Component, model, signal, viewChild } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { CreateExpense, Expense, ExpenseService, UpdateExpense } from '../../services/expense.service';
import { MatIcon } from '@angular/material/icon';
import { ExpenseForm, ExpenseFormComponent } from './expense-form/expense-form.component';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { Temporal } from '@js-temporal/polyfill';

@Component({
  selector: 'app-expense',
  imports: [MatCardModule, MatButtonModule, MatIcon, ExpenseFormComponent, DatePipe, CurrencyPipe],
  providers: [],
  templateUrl: './expense.component.html',
  styleUrl: './expense.component.scss'
})
export class ExpenseComponent {
  private form = viewChild(ExpenseFormComponent);

  public editingExpense = signal(false);
  public savingExpense = signal(false); // TODO: implement UI for saving...

  public expense = model<Expense>();
  public formValid = model(false);
  public formDirty = model(false);
  public formData = model<ExpenseForm>();

  public constructor(private readonly expenseService: ExpenseService) { }

  public editClick(): void {
    this.editingExpense.set(true);
  }

  public async addClick(): Promise<void> {
    const form = this.formData()!;
    const postExpense: CreateExpense = {
      date: this.dateToPlainDate(form.date),
      cents: form.cents,
      categoryId: form.category.id,
      note: !!form.note ? form.note : undefined,
      merchantId: !!form.merchant ? form.merchant.id : undefined,
      tagIds: form.tags.map(tag => tag.id)
    };
    await this.expenseService.postExpense(postExpense);
    this.resetForm();
  }

  public resetAddClick(): void {
    this.resetForm(true);
  }

  public async updateClick(): Promise<void> {
    const form = this.formData()!;
    const putExpense: UpdateExpense = {
      id: this.expense()!.id,
      date: this.dateToPlainDate(form.date),
      cents: form.cents,
      categoryId: form.category.id,
      note: !!form.note ? form.note : undefined,
      merchantId: !!form.merchant ? form.merchant.id : undefined,
      tagIds: form.tags.map(tag => tag.id)
    };
    const expense = await this.expenseService.updateExpense(putExpense);
    this.expense.set(expense);
    this.form()?.refresh(expense);
    this.editingExpense.set(false);
  }

  public cancelUpdateClick(): void {
    this.resetForm();
  }

  private resetForm(clearDate = false): void {
    this.form()?.reset(clearDate);
    this.editingExpense.set(false);
  }

  private dateToPlainDate(date: Date): Temporal.PlainDate {
    return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
  }

  // const saveExpenseModel = this.expenseModel();
  // const date = this.datePipe.transform(saveExpenseModel.date, 'yyyy-MM-dd')?.split('-') ?? [];
  // const expense: CreateExpense = {
  //   year: date[0],
  //   month: date[1],
  //   day: date[2],
  //   cents: saveExpenseModel.cents,
  //   category: saveExpenseModel.category as Category,
  //   merchant: saveExpenseModel.merchant ? saveExpenseModel.merchant as Merchant : undefined,
  //   note: saveExpenseModel.note ? saveExpenseModel.note : undefined,
  //   tags: saveExpenseModel.tags
  // };
  //
  // this.saving.set(true);
  // try {
  //   await this.expenseService.postExpense(expense);
  //   this.lastSelectedDate = saveExpenseModel.date ? saveExpenseModel.date as Date : undefined;
  //   this.expenseModel.set({ ...this.defaultForm, date: saveExpenseModel.date });
  //   this.expenseForm().reset(this.expenseModel());
  // }
  // catch (error) {
  //   console.error(error);
  // }
  // finally {
  //   this.saving.set(false);
  // }
}