import { useEffect, useState } from "react";

import Button from '../components/Button'
import SimpleItemList from "../components/SimpleItemList";
import Ajouter from "../components/Ajouter";

const Inventaire = () => {

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

    useEffect(() => {
        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();
        document.title = 'Inventaire';
    }, []);

    const handleAddItem = async (morceau) => {
        const response = await fetch(`https://localhost:7292/api/Product`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(morceau)
        })

        const newMorceau = await response.json();

        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);
    };

    const handleDeleteItem = async (id) => {

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

        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 (id) => {

    };

    return (
        <div className="inventaire">
            <header className='header'>
                <h1>Inventaire</h1>
                <Button
                    text={isFormvisible ? 'Fermer' : 'Ajouter'}
                    color={isFormvisible ? 'red' : 'purple'}
                    onClick={() => setFormVisibility(!isFormvisible)}
                />
            </header>
            {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
            {morceaux.length > 0 ?
                (<SimpleItemList simpleItems={morceaux}
                    onDelete={handleDeleteItem}
                    onModify={handleModifyItem}
                ></SimpleItemList>) :
                ('Il n\'y a pas de morceaux!')}
        </div>
    );
}

export default Inventaire