import { Card } from "react-bootstrap";
import { useState, useEffect } from "react";


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 = ({ productId, name, price, newPrice, status }) => {

    const [imageSrc, setImageSrc] = useState(null);

    useEffect(() => {
        fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
            .then(response => response.blob())
            .then(blob => {
                const imageUrl = URL.createObjectURL(blob);
                setImageSrc(imageUrl);
            })
    }, []);


    if (name !== undefined) {
        return (

            <Card className="item">
                <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                <Card.Img className="item-img" variant="top" src={imageSrc} />
                <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;