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);

  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)
    };
    this.savingExpense.set(true);
    try {
      await this.expenseService.postExpense(postExpense);
      this.resetForm();
    }
    catch (error) {
      console.error(error); // TODO: Add error processing
    }
    finally {
      this.savingExpense.set(false);
    }
  }

  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)
    };
    this.savingExpense.set(true);
    try {
      const expense = await this.expenseService.updateExpense(putExpense);
      this.expense.set(expense);
      this.form()?.refresh(expense);
      this.editingExpense.set(false);
    }
    catch (error) {
      console.error(error); // TODO: Add error processing
    }
    finally {
      this.savingExpense.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());
  }
}