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

const Morceaux = () => {

    const [products, setProducts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [order, setOrder] = useState("");
    const [filterPrice, setFilterPrice] = useState("");
    const [filterState, setFilterState] = useState("");
    const [isSearch, setIsSearch] = useState(false);

    const { state } = useLocation();

    useEffect(() => {
        document.title = 'Morceaux';
        setIsLoading(true);

        if (state != null) {
            setProducts([...state.searchResults.json]);
            setIsSearch(true);
        }
        else {
            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) => {

        if (isSearch) {

        }
        else {
            setOrder(sortBy);
            var url = `https://localhost:7292/api/Inventory?order=${sortBy}&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 handleFilters = async (price, state) => {

        if (isSearch) {

        }
        {
            setFilterPrice(price);
            setFilterState(state);
            var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
            setIsLoading(true);
            const response = await fetch(url);
            const json = await response.json();
            setProducts([...json]);
            setIsLoading(false);
        }

    }

    return (
        <div className="morceaux">
            <div className="morceaux-options-container">
                <div className='filters-container'>
                    <Filters onChange={handleFilters} />
                </div>
                <div className="sorting-container">
                    <Sorting onChange={handleOrder} />
                </div>
            </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>
                {!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
                    ...
                </Button>}
            </div>
        </div>
    );
}

export default Morceaux;