import { useState, useContext, useEffect } from "react";
import Cookies from "universal-cookie";
import ReviewProdList from "../components/ReviewProdList";
import TotalProductsPrice from "../components/TotalProductsPrice";
import { Row, Col, Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { CartContext } from "../components/Cart";
import StripeContainer from "../components/StripeContainer"

const ReviewInvoice = () => {


    const navigate = useNavigate();
    const mySwal = withReactContent(Swal);

    const cart = useContext(CartContext);

    const [thisInvoice, setThisInvoice] = useState({
        firstName: "",
        lastName: "",
        phoneNumber: "",
        emailAddress: "",
        civicNumber: "",
        appartment: "",
        street: "",
        city: "",
        province: "",
        country: "",
        postalCode: "",
        prodQuant: [],
    });

    const [total, setTotal] = useState(-1);

    useEffect(() => {
        const cookies = new Cookies();
        const thisInvoice = cookies.get('invoice');
        if (thisInvoice != null) {
            var dic = {};
            if (cart.items.length > 0) {
                cart.items.forEach((item) => {
                    dic[item.id] = item.quantity;
                }
                )
            }

            const tpsRate = 5;
            const tvqRate = 9.975;

            var price = cart.getTotalCost();
            var tps = 0;
            var tvq = 0;
            var totalCost;

            tps = price * (tpsRate / 100);
            tvq = price * (tvqRate / 100);
            totalCost = price + tps + tvq;
            totalCost = totalCost * 100;
            totalCost = totalCost.toFixed(0);

            setTotal(totalCost);


            setThisInvoice((e) => {
                return {
                    ...e,
                    firstName: thisInvoice.firstName,
                    lastName: thisInvoice.lastName,
                    phoneNumber: thisInvoice.phoneNumber,
                    emailAddress: thisInvoice.emailAddress,
                    civicNumber: thisInvoice.civicNumber,
                    appartment: thisInvoice.appartment,
                    street: thisInvoice.street,
                    city: thisInvoice.city,
                    province: thisInvoice.province,
                    country: thisInvoice.country,
                    postalCode: thisInvoice.postalCode,
                    prodQuant: dic
                }
            })
        }
        else {
            console.log("No invoice to review!");
        }
    }, [cart]);

    const handleModify = () => {
        navigate("/formulaire")
    }

    const handleConfirmer = async () => {
        const json = JSON.stringify(thisInvoice);

        const response = await fetch(`https://localhost:7292/api/Invoice`, {
            method: 'POST',
            credentials: 'include',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: json
        })
        if (response.ok) {
            mySwal.fire({
                title: 'Commande envoyée avec succès!',
                timer: 2000,
                icon: "success"
            }).then(
                () => {
                    cart.emptyCart();
                    navigate('/morceaux');
                }
            )
        }
        else {
            console.log("Erreur de creation la commande #" + thisInvoice.id);
            mySwal.fire({
                title: 'Erreur!',
                timer: 2000,
                icon: "error"
            })
        }

    }

    return (
        <>
            <Row>
                <h2 className="confirmer-infos">Veuillez confirmer les informations ci-dessous!</h2>
                <Col xs={6} md={4}>

                    <div className="review-invoice-info">
                        <div>
                            <label className="bold">Prénom: </label> <label>{thisInvoice.firstName}</label>
                        </div>
                        <div>
                            <label className="bold">Nom: </label> <label>{thisInvoice.lastName}</label>
                        </div>
                        <div>
                            <label className="bold">Téléphone: </label> <label>{thisInvoice.phoneNumber}</label>
                        </div>
                        <div>
                            <label className="bold">Courriel: </label> <label>{thisInvoice.emailAddress}</label>
                        </div>
                    </div>

                    <div className="review-invoice-address-container">
                        <div>
                            <label className="bold">Numéro civique: </label> <label>{thisInvoice.civicNumber}</label>
                        </div>
                        {thisInvoice.appartment != null ?
                            <div>
                                <label className="bold">Numéro d'appartement: </label> <label>{thisInvoice.appartment}</label>
                            </div>
                            : null
                        }
                        <div>
                            <label className="bold">Rue: </label> <label>{thisInvoice.street}</label>
                        </div>
                        <div>
                            <label className="bold">Ville: </label> <label>{thisInvoice.city}</label>
                        </div>
                        <div>
                            <label className="bold">Province (abréviation): </label> <label>{thisInvoice.province}</label>
                        </div>
                        <div>
                            <label className="bold">Pays: </label> <label>{thisInvoice.country}</label>
                        </div>
                        <div>
                            <label className="bold">Code postal: </label> <label>{thisInvoice.postalCode}</label>
                        </div>
                    </div>
                    <div className="review-invoice-info">
                        <TotalProductsPrice
                        />
                    </div>
                 <Row className="invoice-buttons">
                    {/* <Col xs={6}>
                        <Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
                    </Col> */}
                    <Col xs={12}>
                        <Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
                    </Col>
                </Row> 
                </Col>
                <Col xs={6} md={8}>
                    <ReviewProdList
                    />
                </Col>
            </Row>
           <StripeContainer cost={total} />
        </>

    );
}

export default ReviewInvoice;