import { useEffect } from "react";
import { useState } from "react";
import InvoiceList from "../components/InvoiceList";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const MyInvoices = () => {

    const [invoices, setInvoices] = useState([]);
    
    const mySwal = withReactContent(Swal);
    
    useEffect(() => {
        fetch(`https://localhost:7292/api/Invoice`, {
            method: 'GET',
            mode: 'cors',
            credentials: 'include'
        }).then(async (response) => {
            if (response.ok) {
                var json = await response.json();
                setInvoices(json);
            }
            else{
                console.log("Erreur lors de la requête des invoices");
            }
        });
    }, []);

    const handleCancelInvoice = async (id) => {

        mySwal.fire({
            title: `Annuler la commande?`,
            text: 'Êtes-vous certain de vouloir annuler cette commande (cette action est irréversible)?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Oui',
            cancelButtonText: 'Non',
        }).then(async (result) => {
            if (result.isConfirmed) {
                fetch(`https://localhost:7292/api/Invoice/Cancel/${id}`, {
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include'
                }).then(async (response) => {
                    if (response.ok) {
                        const deletedId = await response.json();
                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));

                        mySwal.fire({
                            title: `Commande annulée...`,
                            text: `La commande a été annulée!`,
                            icon: 'success',
                        });
                    }
                    else {
                        mySwal.fire({
                            title: `Erreur lors de l'annulation de la commande...`,
                            text: `L'erreur: ${await response.json()}`,
                            icon: 'error',
                        });
                    }
                });
            }
        })

    };



    return (
        <>
            <InvoiceList
                invoices={invoices}
                onCancel={handleCancelInvoice}
            />
        </>
    );
}

export default MyInvoices