import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import PriceEditor from "./PriceEditor";

function ProductAdder(props) {
  const [code, setCode] = useState("");
  const [name, setName] = useState("");
  const [price, setPrice] = useState(0);
  const [stock, setStock] = useState(0);

  const add = (e) => {
    e.preventDefault();
    props.addProduct({
      code: parseInt(code),
      price: price,
      stock: parseInt(stock),
      name,
    });
    setCode("");
    setName("");
    setPrice(0);
    setStock("");
  };

  const disabled = isNaN(price) || isNaN(parseInt(code)) || !name;

  return (
    <Form onSubmit={add}>
      <Form.Group>
        <Form.Label>Codigo:</Form.Label>
        <Form.Control
          type="number"
          placeholder="codigo"
          value={code}
          onChange={(e) => setCode(e.target.value)}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Nombre:</Form.Label>
        <Form.Control
          placeholder="nombre"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Precio:</Form.Label>
        <PriceEditor value={price} onChange={setPrice} />
      </Form.Group>
      <Form.Group>
        <Form.Label>Cantidad:</Form.Label>
        <Form.Control
          type="number"
          placeholder="cantidad"
          value={stock}
          onChange={(e) => setStock(e.target.value)}
        />
      </Form.Group>
      <Button disabled={disabled} type="submit">
        Añadir
      </Button>
    </Form>
  );
}

export default ProductAdder;