import { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useState } from "react";
import { Button, Form, Row} from 'react-bootstrap';
import QtySelect from "../components/QtySelect";
import { CartContext } from "../components/Cart";
import { useContext } from "react";

const MorceauDetail = () => {

    const { id } = useParams();
    const [item, setItem] = useState({});
    const [imageSrc, setImageSrc] = useState(null);
    const [itemQty, setItemQty] = useState(0);
    const [currentQty, setCurrentQty] = useState(1);

    const cart = useContext(CartContext);
    const inCartQuantity = cart.getProductQuantity(item.id)

    const isNoStock = () => {
        return item.status == 1 || item.status == 2 || item.status == 5;
    }

    const currentQtyChange = (newQty) => {
        setCurrentQty(newQty);
    }

    useEffect(() => {
        document.title = 'Morceaux';
        async function fetchData() {
            const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
            const json = await response.json();
            setItem(json);
            setItemQty(json.quantity);
        }


        fetchData();

        fetch(`https://localhost:7292/api/Image?id=${id}`)
            .then(response => response.blob())
            .then(blob => {
                const imageUrl = URL.createObjectURL(blob);
                setImageSrc(imageUrl);
            });


    }, []);

    function renderPrice(price, newPrice, status) {
        if (price !== undefined) {
            if (status !== 3 && status !== 4) {
                return (
                    <h3 className="detail-price">
                        {price.toFixed(2).toString().replace(".", ",")} $ CA
                    </h3>
                );
            }
            else {
                return (
                    <>
                        <h3 className="detail-new-price">
                            {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
                        </h3>
                        <h5 className="detail-old-price">
                            {price.toFixed(2).toString().replace(".", ",")} $ CA
                        </h5>
                    </>
                );
            }
        }
    }

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

            switch (statusCode) {
                case 0:
                    return (
                        <h4 className="detail-status detail-status-available">
                            Disponible
                        </h4>
                    );

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

    return (
        <>
            <div className="detail-container">
                <div className="detail-container-image">
                    <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                    <img className="detail-image" alt="" src={imageSrc} />
                </div>
                <div className="detail-container-info">
                    <h1 className="detail-title">{item.title}</h1>
                    <h3 className="detail-category">({item.category})</h3>

                    <div className="detail-status-container">
                        {renderStatus(item.status)}
                    </div>
                    <div className="detail-price-container">
                        {renderPrice(item.price, item.promoPrice, item.status)}
                    </div>

                    <h5>
                        Qté. restante: {isNoStock() ? "Aucun" : itemQty}
                    </h5>
                    <p className="detail-description">{item.description}</p>
                </div>
                <div className="detail-container-controls">
                    {inCartQuantity > 0 ?
                        <>
                            <Form as={Row}>
                                <Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
                                <Button disabled={isNoStock()} className="add-to-cart"
                                    onClick={() => cart.addOneToCart(item.id, item.quantity)}
                                    sm="6">
                                    +
                                </Button >
                                <Button disabled={isNoStock()} className="add-to-cart"
                                    onClick={() => cart.removeOneFromCart(item.id)}
                                    sm="6">
                                    -
                                </Button >
                            </Form>
                            <Button disabled={isNoStock()} className="add-to-cart"
                                onClick={() => cart.deleteFromCart(item.id)} variant="danger"
                                column="true" sm="6" >
                                Sortir du carosse
                            </Button>
                        </>
                        :
                        <>
                            <QtySelect
                                qty={isNoStock() ? 0 : itemQty}
                                onChange={currentQtyChange}
                            />
                            <Button disabled={isNoStock()} className="add-to-cart" onClick={() => cart.addToCart(item, currentQty)}>
                                Ajouter au carosse
                            </Button>
                        </>
                    }
                </div>
            </div>
        </>
    );
}

export default MorceauDetail;