import { useState } from "react"
import { Dropdown } from "react-bootstrap";

const Ajouter = ({ onCreation }) => {

    const [currentStatus, setStatus] = useState("Disponible");

    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [category, setCategory] = useState("");
    const [price, setPrice] = useState("");
    const [quantity, setQuantity] = useState("");
    const [imageName, setImageName] = useState("sqdc.jpg");
    const [statusValue, setStatusValue] = useState(0)

    const handleSubmit = (e) => {
        e.preventDefault(); // Empêcher de reloader la page au submit.

        // Appeler le comportement onCreation
        onCreation({ title, description, category, price, quantity, imageName, statusValue })

        // Reset les états du formulaire.
        setTitle("")
        setDescription("")
        setCategory("")
        setPrice("")
        setQuantity("")
        setImageName("sqdc.jpg")
    }


    return (
        <div className="inventaire-form-container">
            <form className="form-horizontal" onSubmit={handleSubmit}>
                <h4 className="text-center">Ajouter un morceau</h4>
                <div className="form-group">
                    <label>Morceau: </label>
                    <input className="form-control form-input" type='text'
                        placeholder="Ajouter Morceau"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Description: </label>
                    <input type='text' className="form-control form-input"
                        placeholder="description"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Categorie: </label>
                    <input type='text' className="form-control form-input"
                        placeholder="categorie"
                        value={category}
                        onChange={(e) => setCategory(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Prix: </label>
                    <input type='text' className="form-control form-input"
                        placeholder="prix"
                        value={price}
                        onChange={(e) => setPrice(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Quantité: </label>
                    <input type='text' className="form-control form-input"
                        placeholder="Quantité"
                        value={quantity}
                        onChange={(e) => setQuantity(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Nom Image: </label>
                    <input type='text' className="form-control form-input"
                        placeholder="nom image"
                        value={imageName}
                        onChange={(e) => setImageName(e.target.value)} />
                </div>
                <Dropdown className='status-dropdown'>
                    <Dropdown.Toggle id="dropdown-status">
                        {currentStatus}
                    </Dropdown.Toggle>

                    <Dropdown.Menu className='sorting-menu'>
                        <Dropdown.Item key="0" onClick={() => {
                            setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
                            setStatusValue(0);
                        }}>
                            Disponible {/*Le nom de l'option*/}
                        </Dropdown.Item>
                        <Dropdown.Item key="1" onClick={() => {
                            setStatus("Indisponible");
                            setStatusValue(1);
                        }}>
                            Indisponible
                        </Dropdown.Item>
                        <Dropdown.Item key="2" onClick={() => {
                            setStatus("En Commande");
                            setStatusValue(2);
                        }}>
                            En Commande
                        </Dropdown.Item>
                        <Dropdown.Item key="3" onClick={() => {
                            setStatus("Liquidation");
                            setStatusValue(3);
                        }}>
                            Liquidation
                        </Dropdown.Item>
                        <Dropdown.Item key="4" onClick={() => {
                            setStatus("Promotion");
                            setStatusValue(4);
                        }}>
                            Promotion
                        </Dropdown.Item>
                        <Dropdown.Item key="5" onClick={() => {
                            setStatus("Discontinué");
                            setStatusValue(5);
                        }}>
                            Discontinué
                        </Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>

                <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
            </form>
        </div>
    )
}

export default Ajouter