import { InputNumber } from 'antd'
import { useState } from 'react'
import { Button } from '../../elements/Button'

import '../../scss/transaction-modal.scss'
type Props = {
  stackId: string
}

export const TransactionForm = ({ stackId }: Props) => {
  const [amount, setAmount] = useState(0)
  const [stack, setStack] = useState(stackId)
  const [details, setDetails] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    if (!amount) return

    const body = {
      stack,
      details,
      amount: amount,
      created_at: new Date().toISOString(),
    }

    console.log('creating tx', body)
  }

  return (
    <div className="transaction-modal">
      <form onSubmit={handleSubmit} className="form">
        <div className="cancel-button">X</div>
        <h3>Expense for {stack} account</h3>
        <label>
          Amount:
          <InputNumber
            autoFocus
            value={amount}
            onChange={(v) => setAmount(v)}
          />
        </label>
        <label>
          Details:
          <input
            value={details}
            onChange={(e) => setDetails(e.currentTarget.value)}
          ></input>
        </label>
        <label>
          <select value={stack} onChange={(e) => setStack(e.target.value)}>
            <option value={-1} disabled>
              Select Account
            </option>
          </select>
          <Button htmlType="button">cancel</Button>
          <Button htmlType="submit">Submit</Button>
        </label>
      </form>
    </div>
  )
}