import { Card, Button, Form, Row, Col } from 'react-bootstrap';
import { useContext, useState, useEffect } from 'react';
import { CartContext } from './Cart';

export function CartCard({ product }) {

    const cart = useContext(CartContext);
    const productQuantity = cart.getProductQuantity(product.id);

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

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

    return (
        <>
            <Card>
                <Card.Body>
                    <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                    <Card.Img className="item-img" variant="top" src={imageSrc} />
                    <Card.Title>{product.title}</Card.Title>
                    <Card.Text>{product.price}$ CA</Card.Text>
                    <Form as={Row}>
                        <Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
                        <Col sm="6">
                            <Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id)}>+</Button>
                            <Button sm="6" className='mx-2' onClick={() => cart.removeOneFromCart(product.id)}>-</Button>
                        </Col>
                    </Form>
                    <Button variant="danger" className='my-2' onClick={() => cart.deleteFromCart(product.id)}>Supprimer</Button>
                </Card.Body>
            </Card>
        </>
    )
}

export default CartCard;