import { useEffect, useState } from "react";
import { Button } from 'react-bootstrap';
import SimpleItemList from "../components/SimpleItemList";
import Ajouter from "../components/Ajouter";

const Inventaire = () => {

    const [morceaux, setMorceaux] = useState([]);
    const [isFormvisible, setFormVisibility] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

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

    const handleAddItem = async (morceau) => {

        console.log(morceau);

        let formData = new FormData();
        Object.keys(morceau).map((k) => {
            formData.set(k,morceau[k]);
        });

        console.log(formData);

        const response = await fetch(`https://localhost:7292/api/Product`, {
            method: 'POST',
            credentials: 'include',
            mode: 'cors',
            headers: {
                'accept': 'application/json',
            },
            body: formData
        })

        const newMorceau = await response.json();
        console.log(newMorceau);

        if (response.ok) {
            setMorceaux([...morceaux, { ...newMorceau }]);
            console.log("Ajout de l'item avec succès: \r\n" + newMorceau);
        }
        else
            console.log("Erreur de creation " + morceau.title);
    };

    const handleDeleteItem = async (id) => {

        const response = await fetch(`https://localhost:7292/api/Product?id=${id}`, { 
            method: 'DELETE', 
            mode: 'cors',
            credentials: 'include'
        });

        const deletedId = await response.json();

        if (response.ok) {
            setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
            console.log("DELETE de: " + deletedId + " avec succès!");
        }
        else
            console.log("Erreur leur du DELETE de " + id);
    };


    const handleModifyItem = async (morceau) => {
        console.log(morceau);

        let formData = new FormData();
        Object.keys(morceau).map((k) => {
            formData.set(k,morceau[k]);
        });


        const response = await fetch(`https://localhost:7292/api/Product`, {
            method: 'PATCH',
            credentials: 'include',
            mode: 'cors',
            headers: {
                'accept': 'application/json',
            },
            body: formData
        })

        const modifiedMorceau = await response.json();

        if (response.ok)
            setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id));
        else
            console.log("Erreur de creation " + morceau);
    };

    return (
        <div className="inventaire">
            <header className='header'>
                <h1>Inventaire</h1>
                <Button
                    className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
                    onClick={() => setFormVisibility(!isFormvisible)}>
                    {isFormvisible ? 'Fermer' : 'Ajouter'}
                </Button>

            </header>
            {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
            {isLoading && <div className="cat-load" />}
            {morceaux.length > 0 ?
                (<SimpleItemList simpleItems={morceaux}
                    onDelete={handleDeleteItem}
                    onModify={handleModifyItem}
                ></SimpleItemList>) :
                ('Il n\'y a pas de morceaux!')}
        </div>
    );
}

export default Inventaire