import { Button } from 'react-bootstrap';
import { useEffect } from "react";
import ItemList from "../components/ItemList";
import { useState } from 'react';
import Sorting from "../components/Sorting"

const Morceaux = (startingProducts) => {

    const [products, setProducts] = useState([]);
    const [isLoading, setIsLoading] = useState(false);

    var order = "";
    var filterPrice = "";
    var filterState = "";

    useEffect(() => {
        document.title = 'Morceaux';
        setIsLoading(true);
        async function fetchData() {
            const response = await fetch(`https://localhost:7292/api/Inventory`);
            const json = await response.json();
            if (json.length > 0)
                setProducts([...json]);
        }
        fetchData();
        setIsLoading(false);
    }, []);

    const handleNextItems = async () => {

        var url;
        if (products.length > 0)
            url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}&order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
        else
            url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`

        setIsLoading(true);
        const response = await fetch(url);
        const json = await response.json();

        //TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
        if (json.length > 0)
            setProducts([...products, ...json]);

        setIsLoading(false);

    }

    const handleOrder = async (sortBy) => {

        order = sortBy;
        var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
        setIsLoading(true);
        const response = await fetch(url);
        const json = await response.json();
        if (json.length > 0)
            setProducts([...json]);
        setIsLoading(false);
    }
    const handleFilterPrice = async () => {

    }
    const handleFilterState = async () => {

    }

    return (
        <div className="morceaux">
            <div className="sorting-container">
                <Sorting onChange={handleOrder} />
            </div>
            <div className="morceaux-container">
                <ItemList items={products} />
            </div>
            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
            <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
            <div>
                <Button onClick={handleNextItems} className='btn-load-more'>
                    ...
                </Button>
            </div>
        </div>
    );
}

export default Morceaux;