import { CurrencyPipe, registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import { Component, computed, input, LOCALE_ID } from '@angular/core';
import {
  CashFlowContext,
  presentCashFlow,
  TransactionTypeLike,
} from '../../models/transaction-amount';

registerLocaleData(localeDe);

@Component({
  selector: 'app-transaction-amount',
  imports: [CurrencyPipe],
  providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
  templateUrl: './transaction-amount.html',
  styleUrl: './transaction-amount.scss',
})
export class TransactionAmount {
  readonly amount = input.required<number>();
  readonly type = input.required<TransactionTypeLike>();
  readonly context = input.required<CashFlowContext>();

  protected readonly presentation = computed(() =>
    presentCashFlow(this.amount(), this.type(), this.context()),
  );

  protected readonly directionLabel = computed(
    () =>
      ({
        inflow: 'Einzahlung',
        outflow: 'Auszahlung',
        neutral: 'Keine Kassenbewegung',
      })[this.presentation().direction],
  );
}
