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

function renderStatus(statusCode) {
    if (statusCode !== undefined) {

        switch (statusCode) {
            case 0:
                return ("Disponible");
            case 1:
                return ("En commande");
            case 2:
                return ("Indisponible");
            case 3:
                return ("Liquidation");
            case 4:
                return ("Promotion");
            case 5:
                return ("Discontinué");
            default:
                return (<></>);
        }
    }

}

const Modify = ({ morceau, onModify }) => {

    const [currentStatus, setStatus] = useState(renderStatus(morceau.status));

    const [title, setTitle] = useState(morceau.title);
    const [description, setDescription] = useState(morceau.description);
    const [category, setCategory] = useState(morceau.category);
    const [price, setPrice] = useState(morceau.price);
    const [quantity, setQuantity] = useState(morceau.quantity);
    const [imageName, setImageName] = useState(morceau.imageName);
    const [status, setStatusValue] = useState(morceau.status)

    const id = morceau.id;

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

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


    return (
        <div className="inventaire-form-container">
            <form className="form-horizontal" onSubmit={handleSubmit}>
                <h4 className="text-center">Modifier un morceau</h4>
                <div className="form-group">
                    <label>Morceau: </label>
                    <input className="form-control form-input" type='text'
                        placeholder={morceau.title}
                        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={morceau.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={morceau.category}
                        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={morceau.price}
                        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={morceau.quantity}
                        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={morceau.imageName}
                        value={imageName}
                        onChange={(e) => setImageName(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Status: </label>
                    <Dropdown className='status-dropdown'>
                        <Dropdown.Toggle id="dropdown-status-add">
                            {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>
                </div>

                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Modifier Morceau</Button>
            </form>
        </div>
    )
}

export default Modify