import { useRef } from "react";


export default function AddTransaction() {
    const API_URL = "http://localhost:2500";
    const tier = useRef<HTMLSelectElement>(null);
    const enchantment = useRef<HTMLSelectElement>(null);
    const silver = useRef<HTMLInputElement>(null);
    const type = useRef<HTMLInputElement>(null);

    const submit = () => {
      console.log("submit");
      fetch(`${API_URL}/transactions`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          tier: Number(tier.current?.value),
          enchantment: Number(enchantment.current?.value),
          silver: Number(silver.current?.value),
          type: type.current?.value,
        }),
      }).then((response) => {
        if (response.ok) {
          console.log("Transaction added");
        } else {
          console.error("Error adding transaction");
        }
      });
    };

    return (
    <div>
      <p>Add Transaction</p>
      <label>Tier</label>
      <select name="tier" ref={tier}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
      <label>Enchantment</label>
      <select name="enchantment" ref={enchantment}>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <label>Silver</label>
      <input type="number" name="silver" ref={silver} />
      <label>Type</label>
      <input type="text" name="type" ref={type} />
      <button type="submit" onClick={submit}>Add Transaction</button>
    </div>
  );
}