import { useState } from 'react';
import { faTools, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import Modify from './Modify';

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 SimpleItem = ({ item, onDelete, onModify }) => {

    const [isFormvisible, setFormVisibility] = useState(false);

    return (
        <div className="inventaire-item">
            <div className='simple-item-top-container'>
                <h3 className='simple-item-title' >
                    {item.title}

                </h3>
                <h1 className='simple-item-buttons'>
                    <FontAwesomeIcon transform="left-10" icon={faTools} className='.btn-modifier-morceau' style={{ color: "gray", cursor: 'pointer' }}
                        onClick={() => setFormVisibility(!isFormvisible)} />
                    <FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
                        onClick={() => onDelete(item.id)} />
                </h1>
            </div>
            {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
            {!isFormvisible && <div>
                <p> Catégorie: {item.category}, Prix: {item.price.toFixed(2).toString().replace(".", ",")} $ CA, Promo: {item.promoPrice.toFixed(2).toString().replace(".", ",")} $ CA, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
                <p> Description: {item.description}</p>
            </div>
            }
        </div>
    )
}

export default SimpleItem