var sessionId = urlParams.get("session_id")
if (sessionId) {
   fetch("/checkout-session?sessionId=" + sessionId).then(function (result) {
          return result.text();
        }).then(function (session) {
          var sessionJSON = JSON.stringify(session, null, 2);
          document.querySelector("#stripejson").textContent = sessionJSON;
        })
      }

stripe_keys = {
    "secret_key":'sk_test_5...GKIv8T67w0f8000ypWZx9om',
    "publishable_key": 'pk_test_51Hhm...X6q2FLqW',
    "price_id": 'price_1HhmCyBBlU..f',
    "endpoint_secret":'whsec_lFkitrmzG...u0PbD4riv7'
}
stripe.api_key = stripe_keys["secret_key"]

@blueprint.route("/stripe_webhook", methods=["POST"]) 
def stripe_webhook():
    # print("Webhook called ")
    payload = request.get_data(as_text=True)
    sig_header = request.headers.get("Stripe-Signature") 
    event = None
    try:
        event = stripe.Webhook.construct_event(
            payload, sig_header, stripe_keys["endpoint_secret"]
        )
    except ValueError as e:
        return "Invalid payload", 400
    except stripe.error.SignatureVerificationError as e:
        # Invalid signature
        return "Invalid signature", 400

    if event["type"] == "checkout.session.completed":
        try:
            stripeData = event["data"]["object"]
            stripe_customer_id = stripeData['customer']
            stripe_subscription_id = stripeData['subscription']
            user = User.query.filter_by(id=str(session['id'])).first()
            user = User(stripeSubscripstionId= stripe_subscription_id, stripeCustomerId= stripe_customer_id)
            db.session.add(user)
            db.session.commit()
        except:
            print('FAILED TO WORK') #doesn't get returned
    return {}

@blueprint.route("/config")
def get_publishable_key():
    stripe_config = {"publicKey": stripe_keys["publishable_key"]}
    return jsonify(stripe_config)

@blueprint.route("/success")
def success():
    print('session id is')
    print(session['id'])
    user = User.query.filter_by(id=str(session['id'])).first()
    if user.stripeSubscriptionId:
        return render_template("/General/success.html")
    return "didn't get stored"

@blueprint.route("/create-checkout-session") 
def create_checkout_session():
    domain_url = "http://localhost:5000/"
    stripe.api_key = stripe_keys["secret_key"]
    # User.query.filter_by(id=session['id']).first() 
    try:
        checkout_session = stripe.checkout.Session.create(

            client_reference_id=User.id,
            success_url=domain_url + 'success?session_id={CHECKOUT_SESSION_ID}',
            cancel_url=domain_url + "cancel", 
            payment_method_types=["card"],
            mode="subscription",
            line_items=[
                {
                    "price": stripe_keys["price_id"],
                    "quantity": 1,
                }
            ]
        )
        return jsonify({"sessionId": checkout_session["id"]})
    except Exception as e:
        return jsonify(error=str(e)), 403

./stripe prices create
  -d "product=ID_OF_BASIC_PRODUCT"
  -d "unit_amount=1800"
  -d "currency=usd"
  -d "recurring[interval]=month"

  "error": {
    "code": "parameter_missing",
    "doc_url": "https://stripe.com/docs/error-codes/parameter-missing",
    "message": "Missing required param: currency.",
    "param": "currency",
    "request_log_url": "https://dashboard.stripe.com/test/logs/req_DizJci51DGcUB5?t=1685198228",
    "type": "invalid_request_error"
  }
}

export default function CheckoutForm(props) {
    const [priceId, setPriceId] = React.useState('price_1GqywBC2ahMs23DqyBiAZLZG');
    const [openedSuccessModal, setOpenedSuccessModal] = React.useState(false)
    const[openErrorSnack,setOpenSnack] = React.useState(false)
    const[errorMessage,setErrorContent] = React.useState('')

  const stripe = useStripe();
  const elements = useElements();



function showCardError(event) {
  console.log("showCardError")
  if (event.error) {
    setErrorContent(event.error.message)
    setOpenSnack(true)
  } else {
    setErrorContent('event.error.message')

  }
}

function retryInvoiceWithNewPaymentMethod(
  customerId,
  paymentMethodId,
  invoiceId,
  priceId
) {
  console.log("retryInvoiceWithNewPaymentMethod")
  return (
    fetch('http://127.0.0.1:8000/api/user/retry_subscription/', {
      method: 'post',
      headers: {
        'Content-type': 'application/json',
          Authorization: `Bearer ${props.token}`
      },
      body: JSON.stringify({
        customerId: customerId,
        paymentMethodId: paymentMethodId,
        invoiceId: invoiceId,
      }),
    })
      .then((response) => {
        return response.json();
      })
      // If the card is declined, display an error to the user.
      .then((result) => {
        if (result.error) {
          console.log("1 throwing in retryInvoiceWithNewPaymentMethod")
            console.log("1 result=",result)
          // The card had an error when trying to attach it to a customer.
          throw result;
        }
        return result;
      })
      // Normalize the result to contain the object returned by Stripe.
      // Add the addional details we need.
      .then((result) => {
        return {
          // Use the Stripe 'object' property on the
          // returned result to understand what object is returned.
          invoice: result,
          paymentMethodId: paymentMethodId,
          priceId: priceId,
          isRetry: true,
        };
      })
      // Some payment methods require a customer to be on session
      // to complete the payment process. Check the status of the
      // payment intent to handle these actions.
      .then(handleCustomerActionRequired)
      // No more actions required. Provision your service for the user.
      .then(onSubscriptionComplete)
      .catch((error) => {
        console.log(" catching 2 in retryInvoiceWithNewPaymentMethod :",error)
        // An error has happened. Display the failure to the user here.
        // We utilize the HTML element we created.
        showCardError(error);
      })
  );
}





function handlePaymentMethodRequired({
  subscription,
  paymentMethodId,
  priceId,
}) {
  console.log("handlePaymentMethodRequired")
  if (subscription.status === 'active') {
    console.log("considered active in handlePaymentMethodRequired")
    // subscription is active, no customer actions required.
    return { subscription, priceId, paymentMethodId };
  } else if ( subscription.latest_invoice.payment_intent.status === 'requires_payment_method') {
    console.log("subscription.latest_invoice.payment_intent.status=",subscription.latest_invoice.payment_intent.status)
    // Using localStorage to manage the state of the retry here,
    // feel free to replace with what you prefer.
    // Store the latest invoice ID and status.

    // faire des vraies variables de ça, car comme ça = de la merde
    localStorage.setItem('latestInvoiceId', subscription.latest_invoice.id);
    localStorage.setItem('latestInvoicePaymentIntentStatus', subscription.latest_invoice.payment_intent.status);
        console.log("11 throwing in handlePaymentMethodRequired")
      console.log("11 custom_throw=",{ error: { message: 'Your card was declined.' } })



    throw { error: { message: 'Your card was declined.' } };
  } else {
    return { subscription, priceId, paymentMethodId };
  }
}


function handleCustomerActionRequired({
  subscription,
  invoice,
  priceId,
  paymentMethodId,
  isRetry,
}) {
      console.log("handleCustomerActionRequired")

  if (subscription && subscription.status === 'active') {
        console.log("subscription exists and subscription.status ===active in handleCustomerActionRequired")

    // Subscription is active, no customer actions required.
    return { subscription, priceId, paymentMethodId };
  }

  // If it's a first payment attempt, the payment intent is on the subscription latest invoice.
  // If it's a retry, the payment intent will be on the invoice itself.
  let paymentIntent = invoice ? invoice.payment_intent : subscription.latest_invoice.payment_intent;

  if (paymentIntent.status === 'requires_action' ||  (isRetry === true && paymentIntent.status === 'requires_payment_method')) {
    console.log("paymentIntent.status:",paymentIntent.status)
    console.log("paymentIntent.client_secret:",paymentIntent.client_secret)

    return stripe
      .confirmCardPayment(paymentIntent.client_secret, {
        payment_method: paymentMethodId,
      })
      .then((result) => {
        if (result.error) {
          console.log("4")
          console.log("Throwing 4 in handleCustomerActionRequired =",result)
          // Start code flow to handle updating the payment details.
          // Display error message in your UI.
          // The card was declined (i.e. insufficient funds, card has expired, etc).
          console.log("result ")
          throw result;
        } else {
          if (result.paymentIntent.status === 'succeeded') {
            console.log("result.paymentIntent.status:",result.paymentIntent.status)
            console.log("in handleCustomerActionRequired")
            // Show a success message to your customer.

            setOpenedSuccessModal(true)
            localStorage.removeItem('latestInvoiceId')
            localStorage.removeItem('latestInvoicePaymentIntentStatus')


            // There's a risk of the customer closing the window before the callback.
            // We recommend setting up webhook endpoints later in this guide.
            return {
              priceId: priceId,
              subscription: subscription,
              invoice: invoice,
              paymentMethodId: paymentMethodId,
            };
          }
        }
      })
      .catch((error) => {
        console.log("6")
        console.log("Catching 6 in handleCustomerActionRequired=",error)
        showCardError(error);
      });
  } else {
    // No customer action needed.
    return { subscription, priceId, paymentMethodId };
  }
};


  function onSubscriptionComplete(result) {
    console.log("onSubscriptionComplete")
    console.log("result.subscription.status=",result.subscription.status)
    if (result.subscription.status === 'active') {

      setOpenedSuccessModal(true)
      localStorage.removeItem('latestInvoiceId')
      localStorage.removeItem('latestInvoicePaymentIntentStatus')

  }
}


  function createSubscription({ customerId, paymentMethodId, priceId }) {
  return (
    fetch('http://127.0.0.1:8000/api/user/create_subscription/', {
      method: 'post',
      headers: {
        'Content-type': 'application/json',
          Authorization: `Bearer ${props.token}`

      },
      body: JSON.stringify({
        customerId: customerId,
        paymentMethodId: paymentMethodId,
        priceId: priceId,
      }),
    })
      .then((response) => {
        return response.json();
      })
      // If the card is declined, display an error to the user.
      .then((result) => {
        if (result.error) {
                            console.log("7 throwing in createSubscription ")
                              console.log("7 result=",result)

          // The card had an error when trying to attach it to a customer.
          throw result;
        }
        return result;
      })
      // Normalize the result to contain the object returned by Stripe.
      // Add the addional details we need.
      .then((result) => {
          //console.log("return=",result)
        return {
          paymentMethodId: paymentMethodId,
          priceId: priceId,
          subscription: result,
        };
      })

      // Some payment methods require a customer to be on session
      // to complete the payment process. Check the status of the
      // payment intent to handle these actions.
      // // If attaching this card to a Customer object succeeds,
      // // but attempts to charge the customer fail, you
      // // get a requires_payment_method error.
      // // No more actions required. Provision your service for the user.
        .then(handleCustomerActionRequired)
        .then(handlePaymentMethodRequired)
        .then(onSubscriptionComplete)
        .catch((error) => {
        // An error has happened. Display the failure to the user here.
        // We utilize the HTML element we created.
        console.log("8")
        console.log("Catching 8 in createSubscription =",error)
        showCardError({ error: { message: 'Your card was declined.' } });
      })
  );
}

  function createPaymentMethod(cardElement, customerId, priceId) {
  return stripe
    .createPaymentMethod({
      type: 'card',
      card: cardElement,
    })



    .then((result) => {
      if (result.error) {
        console.log("9 in createPaymentMethod")
        showCardError(result)
      } else {
          let latestInvoiceId = localStorage.getItem('latestInvoiceId');
        let latestInvoicePaymentIntentStatus =  localStorage.getItem('latestInvoicePaymentIntentStatus')

        if (latestInvoiceId && latestInvoicePaymentIntentStatus==='requires_payment_method'){
            retryInvoiceWithNewPaymentMethod(customerId, result.paymentMethod.id, latestInvoiceId,priceId)
        }

        else  createSubscription({
          customerId: customerId,
          paymentMethodId: result.paymentMethod.id,
          priceId: priceId,
        });
      }
    });
}



  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    console.log("priceId=",priceId)
    console.log("customerId=",props.customerId)

    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

      await createPaymentMethod(elements.getElement(CardElement),props.customerId,priceId)
   };



  return (
    <form onSubmit={handleSubmit}>
      <FormControl component="fieldset">
  <FormLabel component="legend">Plan</FormLabel>
  <RadioGroup aria-label="product_id" name="product_id" value={priceId} onChange={(event)=>setPriceId(event.target.value)}>
    <FormControlLabel value="price_1GvhOFC2ahMs23Dqf7E83kTk" control={<Radio />} label="EXPENSIVE Plan" />
    <FormControlLabel value="price_1GqywBC2ahMs23DqyBiAZLZG" control={<Radio />} label="Veterinary Plan (15.99 / mois)" />
  </RadioGroup>
</FormControl>
      <CardSection/>
      <button disabled={!stripe}>Save Card</button>
<ModalSuccessPayment is_open={openedSuccessModal} setIsOpen={setOpenedSuccessModal} text ={<Emoji text=" 🎉️ Your payment has been accepted and your subscription started" />} {...props}/>
      {/*{snack}*/}
      <Snackbar open={errorMessage.length > 0} autoHideDuration={600000} message={errorMessage}/>
    </form>
  );
}