import { atom } from 'nanostores';
import type { Transaction } from '../types';

// Atom to hold the ID of the currently selected account
export const currentAccountId = atom<string | null>(null);

// Atom to hold the transaction object when editing, or null otherwise
export const transactionToEdit = atom<Transaction | null>(null);

// Atom to trigger refreshes in components that depend on external changes
export const refreshKey = atom<number>(0);

// Action to increment the refresh key, forcing dependent effects to re-run
export function triggerRefresh() {
  refreshKey.set(refreshKey.get() + 1);
}

// Action to set the transaction to be edited
export function startEditingTransaction(transaction: Transaction) {
  transactionToEdit.set(transaction);
  // Optionally, trigger UI changes like expanding the form here
  // document.getElementById('add-transaction-section')?.classList.replace('collapsed', 'expanded');
  // document.getElementById('toggle-add-txn-btn')?.setAttribute('aria-expanded', 'true');
}

// Action to clear the edit state
export function cancelEditingTransaction() {
  transactionToEdit.set(null);
  // Optionally, collapse the form
  // document.getElementById('add-transaction-section')?.classList.replace('expanded', 'collapsed');
  // document.getElementById('toggle-add-txn-btn')?.setAttribute('aria-expanded', 'false');
}

// Action triggered after a transaction is saved (created or updated)
export function transactionSaved(transaction: Transaction) {
  // Clear edit state if the saved transaction was the one being edited
  if (transactionToEdit.get()?.id === transaction.id) {
    transactionToEdit.set(null);
  }
  // Potentially trigger UI updates or refreshes here
  // This might involve dispatching a custom event or calling a refresh function
  document.dispatchEvent(new CustomEvent('transactionSaved', { detail: { transaction } }));

  // Trigger a general refresh after saving too, to update balance
  triggerRefresh();
}