// expense-tracker/src/lib/types/utility.ts
export type ElementOf<T> = T extends readonly (infer U)[] ? U : never
 
export type UnwrapPromise<T> = T extends Promise<infer U> ? U : T
 
/**
 * date, amount, memo 키만 남기고 이름 끝에 Error를 붙인
 * 선택적 문자열 프로퍼티로 바꿉니다.
 * type, category는 select 입력이라 에러 메시지가 필요 없어 제외합니다.
 */
export type FormErrors<T> = {
  [K in Exclude<keyof T, 'type' | 'category'> as `${string & K}Error`]?: string
}

// expense-tracker/src/ui/transactionForm.ts
import type { Transaction, ExpenseCategory, IncomeCategory } from '../models'
import { getRequiredElement } from '../lib/dom.ts'
import type { FormErrors } from '../lib/types/utility.ts'
 
export type NewTransactionDraft = Omit<Transaction, 'id'>
export type EditableFields = Pick<Transaction, 'date' | 'amount' | 'memo'>
 
export interface TransactionFormHandlers {
  onCreate: (draft: NewTransactionDraft) => void
  onUpdate: (id: string, changes: Partial<EditableFields>) => void
}
 
const EXPENSE_CATEGORIES: ExpenseCategory[] = ['food', 'transport', 'housing', 'shopping', 'etc-expense']
const INCOME_CATEGORIES: IncomeCategory[] = ['salary', 'bonus', 'interest', 'etc-income']
 
function categoryOptionsHtml(type: Transaction['type']): string {
  const categories = type === 'expense' ? EXPENSE_CATEGORIES : INCOME_CATEGORIES
  return categories.map((category) => `<option value="${category}">${category}</option>`).join('')
}
 
function validateDraft(draft: NewTransactionDraft): FormErrors<NewTransactionDraft> {
  const errors: FormErrors<NewTransactionDraft> = {}
  if (draft.date === '') {
    errors.dateError = '날짜를 입력하세요.'
  }
  if (!Number.isFinite(draft.amount) || draft.amount <= 0) {
    errors.amountError = '금액은 0보다 큰 숫자여야 합니다.'
  }
  if (draft.memo.length > 50) {
    errors.memoError = '메모는 50자 이내로 입력하세요.'
  }
  return errors
}
 
export function mountTransactionForm(root: HTMLElement, handlers: TransactionFormHandlers) {
  root.innerHTML = `
    <form id="transaction-form">
      <select name="type" id="type-select">
        <option value="expense">지출</option>
        <option value="income">수입</option>
      </select>
      <select name="category" id="category-select"></select>
      <input name="date" type="date" required />
      <span id="date-error" class="field-error"></span>
      <input name="amount" type="number" required />
      <span id="amount-error" class="field-error"></span>
      <input name="memo" type="text" placeholder="메모" />
      <span id="memo-error" class="field-error"></span>
      <button type="submit">추가</button>
    </form>
    <form id="edit-form" hidden>
      <p>거래 수정</p>
      <input name="date" type="date" required />
      <input name="amount" type="number" required />
      <input name="memo" type="text" placeholder="메모" />
      <button type="submit">저장</button>
      <button type="button" id="edit-cancel">취소</button>
    </form>
  `
 
  const form = getRequiredElement<HTMLFormElement>(root, '#transaction-form')
  const typeSelect = getRequiredElement<HTMLSelectElement>(root, '#type-select')
  const categorySelect = getRequiredElement<HTMLSelectElement>(root, '#category-select')
  const dateErrorEl = getRequiredElement<HTMLSpanElement>(root, '#date-error')
  const amountErrorEl = getRequiredElement<HTMLSpanElement>(root, '#amount-error')
  const memoErrorEl = getRequiredElement<HTMLSpanElement>(root, '#memo-error')
  const editForm = getRequiredElement<HTMLFormElement>(root, '#edit-form')
  const editCancelButton = getRequiredElement<HTMLButtonElement>(root, '#edit-cancel')
  let editingId: string | null = null
 
  function refreshCategoryOptions(): void {
    categorySelect.innerHTML = categoryOptionsHtml(typeSelect.value as Transaction['type'])
  }
 
  function renderErrors(errors: FormErrors<NewTransactionDraft>): void {
    dateErrorEl.textContent = errors.dateError ?? ''
    amountErrorEl.textContent = errors.amountError ?? ''
    memoErrorEl.textContent = errors.memoError ?? ''
  }
 
  function handleCreateSubmit(event: SubmitEvent): void {
    event.preventDefault()
    const formData = new FormData(form)
    const type = formData.get('type') as Transaction['type']
    const date = String(formData.get('date'))
    const amount = Number(formData.get('amount'))
    const memo = String(formData.get('memo'))
    const draft: NewTransactionDraft =
      type === 'expense'
        ? { type: 'expense', date, amount, memo, category: formData.get('category') as ExpenseCategory }
        : { type: 'income', date, amount, memo, category: formData.get('category') as IncomeCategory }
 
    const errors = validateDraft(draft)
    if (Object.keys(errors).length > 0) {
      renderErrors(errors)
      return
    }
    renderErrors({})
    handlers.onCreate(draft)
    form.reset()
    refreshCategoryOptions()
  }
 
  function openEdit(transaction: Transaction): void {
    editingId = transaction.id
    const dateInput = editForm.elements.namedItem('date') as HTMLInputElement
    const amountInput = editForm.elements.namedItem('amount') as HTMLInputElement
    const memoInput = editForm.elements.namedItem('memo') as HTMLInputElement
    dateInput.value = transaction.date
    amountInput.value = String(transaction.amount)
    memoInput.value = transaction.memo
    editForm.hidden = false
  }
 
  function closeEdit(): void {
    editingId = null
    editForm.hidden = true
    editForm.reset()
  }
 
  function handleEditSubmit(event: SubmitEvent): void {
    event.preventDefault()
    if (editingId === null) {
      return
    }
    const formData = new FormData(editForm)
    handlers.onUpdate(editingId, {
      date: String(formData.get('date')),
      amount: Number(formData.get('amount')),
      memo: String(formData.get('memo')),
    })
    closeEdit()
  }
 
  form.addEventListener('submit', handleCreateSubmit)
  typeSelect.addEventListener('change', refreshCategoryOptions)
  editForm.addEventListener('submit', handleEditSubmit)
  editCancelButton.addEventListener('click', closeEdit)
  refreshCategoryOptions()
 
  return { openEdit }
}

npm run dev