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

const Invoices = () => {

    const [invoices, setInvoices] = useState([]);

    const mySwal = withReactContent(Swal);

    const [alertTitle, setAlertTitle] = useState("");
    const [alertMessage, setAlertMessage] = useState("");
    const [showAlert, setShowAlert] = useState(false);

    useEffect(() => {
        fetch(`https://localhost:7292/api/Invoice?all=true`, {
            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));

                        onShowAlert('Annulation de la commande avec succès!', 2000);
                    }
                    else {
                        mySwal.fire({
                            title: `Erreur lors de l'annulation de la commande...`,
                            text: `L'erreur: ${response}`,
                            icon: 'error',
                        });
                    }
                });
            }
        })

    };

    const onShowAlert = (title, message, time) => {

        setAlertTitle(title);
        setAlertMessage(message);
        setShowAlert(true);

        window.setTimeout(() => { setShowAlert(false); }, time);
    }

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

export default Invoices