import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useEffect, useState } from "react";


export default function ProductForm({ name, price, onNameChange, onPriceChange, onSubmit, busy }) {
    let [form,setForm] = useState({
        name: "",
        value: "",
    })
    let [formBusy,setFormBusy] = useState(false);
    let nameChanged = (e: React.ChangeEvent<HTMLInputElement>) => { 
        name = e.target.value;
        onNameChange(e.target.value);
    }
    let priceChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
        price = e.target.value;
        onPriceChange(e.target.value);
    }
    let submit = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        onSubmit();
    }
    formBusy = busy;
    useEffect(() => {
        setFormBusy(busy);
    },[busy]);
    return (
        <form>
            <fieldset disabled={formBusy}>
                <div className="mb-3">
                    <label htmlFor="name">Name</label>
                    <input className="form-control" id="name" value={name} onChange={nameChanged}></input>
                </div>
                <div className="mb-3">
                    <label htmlFor="email">Price</label>
                    <input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
                </div>
                <div className="mb-3">
                    <button type="submit" className="btn btn-primary" onClick={submit}>
                        <FontAwesomeIcon icon={faChevronUp}/> Submit
                    </button>
                </div>
            </fieldset>
        </form>
    );
}