import { Button } from "react-bootstrap";
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Modal, ModalBody, ModalHeader } from "react-bootstrap";
import { useState, useContext } from "react";
import { CartCard } from './CartCard';
import { CartContext } from './Cart';
import { useNavigate } from "react-router-dom";
import Cookies from "universal-cookie";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const CartButton = () => {

    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const cart = useContext(CartContext);
    const navigate = useNavigate();
    const cookies = new Cookies();
    const mySwal = withReactContent(Swal);

    const productsCount = cart.items.reduce((sum, product) => sum + product.quantity, 0)

    const handlePayer = () => {

        if (cookies.get('GMGM') == null || cookies.get('GMGM').LoggedIn == false) {
            mySwal.fire({
                title: `Vous n'êtes pas connecté`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Se connecter',
                cancelButtonText: `Continuer en tant qu'invité`,
            }).then((result) => {
                if (result.isConfirmed) {
                    navigate("/login");
                    handleClose();
                }
                else if (result.isDismissed && result.dismiss == Swal.DismissReason.cancel) {
                    navigate("/formulaire");
                    handleClose();
                }
            });
        }
        else {
            navigate("/formulaire");
            handleClose();
        }
    }

    return (
        <>
            <Button id="cart-button" onClick={handleShow}>
                <FontAwesomeIcon icon={faCartShopping} />
                <div id="cart-count">{productsCount}</div>
            </Button>
            <Modal show={show} onHide={handleClose} className="carosse">
                <ModalHeader closeButton>
                    <Modal.Title>Carosse</Modal.Title>
                </ModalHeader>
                <ModalBody>
                    {productsCount > 0 ?
                        <>
                            {cart.items.map(
                                (item) =>
                                (
                                    <CartCard key={item.id} product={item} />
                                ))}
                            <div className="payer">
                                <h className="total">Sous-total: {cart.getTotalCost().toFixed(2)}$ CAD</h>
                                <Button onClick={() => handlePayer()} className="payer" >Payer</Button>
                            </div>
                        </>
                        :
                        <h1>C'est vide! Rempli le hi hi!</h1>
                    }
                </ModalBody>
            </Modal>
        </>
    )
}

export default CartButton;