import React, { useState, useContext, useEffect } from "react"
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import { Row, Col, Button, Form } from "react-bootstrap"
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { CartContext } from "../components/Cart";
import { useNavigate } from "react-router-dom";
import { useForm } from "react-hook-form";
import Cookies from "universal-cookie";

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "black",
            color: "white",
            fontWeight: 500,
            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
            fontSize: "16px",
            fontSmoothing: "antialiased",
            ":-webkit-autofill": { color: "beige" },
            "::placeholder": { color: "lightgray" }
        },
        invalid: {
            iconColor: "red",
            color: "red"
        }
    }
}



const PaymentForm = ({ cost, invoice }) => {
    const navigate = useNavigate();
    const { register, handleSubmit, setValue, formState: { errors } } = useForm();
    const cookies = new Cookies();

    const mySwal = withReactContent(Swal);
    const [cardName, setCardName] = useState("");
    const [cardPhone, setCardPhone] = useState("");
    const [cardEmail, setCardEmail] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    const [userAddresses, setUserAddresses] = useState([]);
    const [currentAdress, setCurrentAdress] = useState({
        civicNumber: "",
        appartment: "",
        street: "",
        city: "",
        province: "",
        country: "",
        postalCode: ""
    })


    const stripe = useStripe();
    const elements = useElements();
    const cart = useContext(CartContext);



    useEffect(() => {
        const userInfo = cookies.get("GMGM");
        if (userInfo != null && userInfo.LoggedIn == true) {
            fetch("https://localhost:7292/api/Address", {
                method: 'GET',
                credentials: 'include',
                mode: 'cors'
            },).then(async (response) => {
                if (response.ok) {
                    const json = await response.json();
                    setUserAddresses(json);
                    if (json.length >= 1) {
                        setFormAddress(json[0]);
                    }
                }
            });
        }
    }, []);

    const setFormAddress = (address) => {
        setCurrentAdress((e) => {
            return {
                ...e,
                civicNumber: address.civicNumber,
                appartment: address.appartment,
                street: address.street,
                city: address.city,
                province: address.province,
                country: address.country,
                postalCode: address.postalCode
            }
        });

        setValue("civicNumber", address.civicNumber);
        setValue("appartment", address.appartment);
        setValue("street", address.street);
        setValue("city", address.city);
        setValue("province", address.province);
        setValue("country", address.country);
        setValue("postalCode", address.postalCode);
    }




    const onSubmit = async (e) => {
        //e.preventDefault();
        setIsLoading(true);
        const { error } = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardElement)
        })

        if (cost <= 0) {
            console.log("Coût invalide: ", cost);
            return;
        }

        if (!error) {
            stripe.createToken(elements.getElement(CardElement), { name: cardName })
                .then((result) => {
                    if (!result.error) {
                        invoice.token = result.token.id;
                        invoice.description = `Payement de ${cost} à GM`;
                        invoice.amountInCents = cost;
                        invoice.currencyCode = "CAD";
                        invoice.name = cardName;
                        invoice.email = cardEmail;
                        invoice.phone = cardPhone;
                        invoice.lastFourDigits = result.token.card.last4;
                        invoice.billCivicNumber = currentAdress.civicNumber;
                        invoice.billAppartment = currentAdress.appartment;
                        invoice.billStreet = currentAdress.street;
                        invoice.billCity = currentAdress.city;
                        invoice.billProvince = currentAdress.province;
                        invoice.billCountry = currentAdress.country;
                        invoice.billPostalCode = currentAdress.postalCode;

                        const json = JSON.stringify(invoice);
                        console.log(invoice);

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



    return (
        <>
            {
                <Col xl={4}>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <div style={{ "borderRadius": "5px" }} className="form-container">


                            <h4 className="text-center">Adresse de Facturation</h4>
                            <div className="Error_color">
                                <div className="formulaire-address">
                                    <h5>
                                        Adresse
                                        <Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
                                            {userAddresses.map((a, i) => (
                                                <option key={a.id} value={i} >{a.civicNumber} {a.street} </option>
                                            ))}
                                        </Form.Select>
                                    </h5>
                                    <div className="form-group">
                                        <label>Numéro civique*: </label>
                                        <input type="number" min="0" {...register("civicNumber", { required: true })}
                                            value={currentAdress.civicNumber}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
                                    </div>
                                    <div className="form-group">
                                        <label>Rue*: </label>
                                        <input {...register("street", { required: true, minLength: 3, maxLength: 50 })}
                                            value={currentAdress.street}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
                                        {errors.street && errors.street.type === 'minLength' && <span>Votre rue doit avoir au moins 3 lettres!</span>}
                                        {errors.street && errors.street.type === 'maxLength' && <span>Votre rue doit avoir moins de 51 lettres!</span>}

                                    </div>
                                    <div className="form-group">
                                        <label>Numéro d'appartement: </label>
                                        <input {...register("appartment", { required: false })}
                                            value={currentAdress.appartment}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
                                    </div>
                                    <div className="form-group">
                                        <label>Ville*: </label>
                                        <input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
                                            value={currentAdress.city}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
                                        {errors.city && errors.city.type === 'minLength' && <span>Votre ville doit avoir au moins 4 lettres!</span>}
                                        {errors.city && errors.city.type === 'maxLength' && <span>Votre ville doit avoir moins de 51 lettres!</span>}
                                    </div>
                                    <div className="form-group">
                                        <label>Province (abréviation)*: </label>
                                        <input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })}
                                            value={currentAdress.province}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
                                        {errors.province && errors.province.type === 'maxLength' && <span>Votre province doit avoir moins de 4 lettres!</span>}
                                    </div>
                                    <div className="form-group">
                                        <label>Pays*: </label>
                                        <input {...register("country", { required: true, minLength: 4, maxLength: 30 })}
                                            value={currentAdress.country}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
                                        {errors.country && errors.country.type === 'minLength' && <span>Votre pays doit avoir au moins 4 lettres!</span>}
                                        {errors.cicountryty && errors.country.type === 'maxLength' && <span>Votre pays doit avoir moins de 31 lettres!</span>}
                                    </div>
                                    <div className="form-group">
                                        <label>Code postal*: </label>
                                        <input {...register("postalCode", { required: true, pattern: /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i })}
                                            value={currentAdress.postalCode}
                                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} />
                                    </div>
                                    <div>
                                        {errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
                                        {errors.postalCode && errors.postalCode.type === 'pattern' && <span>Veuillez entrer un code postal valide!</span>}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <Col md={12}>
                            <fieldset className="FormGroup">
                                <input className="FormRow cardholder-info" placeholder="Nom sur la carte" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
                                <input className="FormRow cardholder-info" placeholder="Téléphone de facturation" id="cardholder-phone" type="text" value={cardPhone} onChange={e => setCardPhone(e.target.value)} />
                                <input className="FormRow cardholder-info" placeholder="Addresse courriel de facturation" id="cardholder-email" type="text" value={cardEmail} onChange={e => setCardEmail(e.target.value)} />
                                <div className="FormRow">
                                    <CardElement options={CARD_OPTIONS} />
                                </div>
                            </fieldset>
                            <div className="Payment-btn-container">
                                <Button className="Payment-btn" disabled={isLoading} type="submit">Payer</Button>
                                {
                                    isLoading && <div>Paiement en cours...</div>
                                }
                            </div>
                        </Col>
                    </form>
                </Col>
            }
        </>
    )

}

export default PaymentForm;