import { Card } from "react-bootstrap";

// public enum States { 
//     Available,
//     BackOrder,
//     Unavailable,
//     Clearance,
//     Promotion,
//     Discontinued
// }
function renderStatus(statusCode) {
    if (statusCode !== undefined) {

        switch (statusCode) {
            case 0:
                return (
                    <Card.Text className="item-status item-status-available">
                        Disponible
                    </Card.Text>
                );

            case 1:
                return (
                    <Card.Text className="item-status item-status-backorder">
                        En commande
                    </Card.Text>
                );
            case 2:
                return (
                    <Card.Text className="item-status item-status-unavailable">
                        Indisponible
                    </Card.Text>
                );
            case 3:
                return (
                    <Card.Text className="item-status item-status-clearence">
                        Liquidation
                    </Card.Text>
                );
            case 4:
                return (
                    <Card.Text className="item-status item-status-promotion">
                        Promotion
                    </Card.Text>
                );
            case 5:
                return (
                    <Card.Text className="item-status item-status-discontinued">
                        Discontinué
                    </Card.Text>
                );
            default:
                return (
                    <></>
                );
        }
    }

}

function renderPrice(price, newPrice, status) {
    if (price !== undefined) {


        if (status != 3 && status != 4) {
            return (
                <Card.Text className="item-price-container">
                    <span className="item-price">
                        {price.toFixed(2).toString().replace(".", ",")} $ CA
                    </span>
                </Card.Text>
            );
        }
        else {
            return (
                <Card.Text className="item-price-container">
                    <span className="item-old-price">
                        {price.toFixed(2).toString().replace(".", ",")} $ CA
                    </span>
                    <span className="item-new-price">
                        {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
                    </span>
                </Card.Text>
            );
        }
    }

}

const Item = ({ imageUrl, name, price, newPrice, status }) => {
    if (name !== undefined) {
        return (

            <Card className="item">
                <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
                <Card.Body className="item-info">
                    <div className="item-name-container">
                        <Card.Title className="item-name">
                            {name}
                        </Card.Title>
                    </div>
                    <div className="item-status-container">
                        {renderStatus(status)}
                    </div>
                    <div>
                        {renderPrice(price, newPrice, status)}
                    </div>

                </Card.Body>
            </Card>
        );
    }
    else {
        return (<></>);
    }
}

export default Item;