cash-stacks/frontend/src/forms/AccountForm.tsx

import React, { useState } from 'react'
import { Account } from '../types'

import { message } from 'antd'
import { useStacks } from '../hooks/getMany/useStacks'

type Props = {
  account?: Account
}

export const AccountForm = ({ account }: Props) => {
  const stacks = useStacks('')

  const [name, setName] = useState<string>(account?.name || '')
  const [details, setDetails] = useState<string>(account?.details || '')
  const [income, setIncome] = useState<number>(account?.income || 0)
  const [expenses, setExpenses] = useState<number>(account?.expenses || 0)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name || !income || !expenses) message.error(`fill out all the fields!`)

    const body = {
      name,
      income,
      expenses,
      details,
    }

    // account?.id
    //   ? await api.updateAccount(account.id, body)
    //   : await api.createAccount(body)

    message.success('Yaaa')
  }

  return (
    <>
      <h1>{account?.id ? 'Budget Details' : 'Create Budget'}</h1>
      <form className="dank-form" onSubmit={handleSubmit}>
        <h3>General</h3>
        <label>
          Name:
          <input onChange={(e) => setName(e.target.value)} value={name}></input>
        </label>
        <label>
          Description (optional):
          <input
            type="text"
            onChange={(e) => setDetails(e.target.value)}
            value={details}
          ></input>
        </label>
        <h3>Income &amp; Expenses</h3>
        <label>
          Monthly Income:
          <input
            onChange={(e) => setIncome(parseInt(e.target.value) || 0)}
            value={income}
          ></input>
        </label>
        <label>
          Monthly Expenses:
          <input
            onChange={(e) => setExpenses(parseInt(e.target.value) || 0)}
            value={expenses}
          ></input>
        </label>
        <h3>Budgets</h3>
        {stacks.data?.map((stack) => (
          <div key={stack.details} className="form-item">
            <label>{stack.name}</label>
            <input type="number" value={stack.amount}></input>
          </div>
        ))}
        <button type="submit">{account?.id ? 'Save' : 'Create'}</button>
      </form>
    </>
  )
}